Building Cross Platform Apps with Visual Studio – Part 3

In part one we did the setup. Part two we did the coding. Now we will continue some of the coding but also start looking at some configuration options.

Step 1: More Services

Lets finish up the rest of the services. We are basically mimicking what we just did for the Occasions API call for the Results and Details. If we look at the API we find the endpoint to get all drinks by occasion is /drinks/for/occasion_id. We have a route that mimics that /drinks/:filter/:id We can use this route, controller and service over and over again by changing the filter based on what we want returned.

Open up services.js and add the following to the Drinks factory method

Similar to our first method for Occasions where we have the endpoint, but we are passing in some parameters into the URL as well as creating a method called List.

Step 2: Controller

Lets bounce into the controller and add the following for the DrinkResultsController.

We are getting the parameters from $routeParams. $routeParams allows us to access the location, path and search when there is a match to the route.

Step 3: View

We are going to add a ng-repeater and some data binding so we can show off our results. Open up drink-results.html and replace most of the HTML with the following:

 Step 4: Internal Links

The Windows Store apps are going to think all of the links should open up new windows when we click on them. In order to fix that we need to add a little compile provider module in our app.js file.

 Step 5: Run it!

We should see the results of all of the drinks per occasion!

Step 6: Lets get the Drink Detail Done!

Services.js – all we need to do is add one little line to our Drinks service

Now we can call list or byid.

In Controller.js we will add the following for the DrinksDetailController

Same as before, except we are only passing in one parameter and calling byid.

Now our drink-detail.html

 

That is it. You can run it and you now have a Cross Platform AngualrJS app consuming an API!

Next, we will look at publishing and other configuration options.

Code is on GitHub as well.

 

Leave a Comment

(0 Comments)

Your email address will not be published. Required fields are marked *