Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

Step 1: API Key

Head on over to addb.absolutdrinks.com and register for a key. Click on sign up and follow the steps. Pretty straightforward. You do not need to provide a URL since our app will be using the REST API.

Once that is complete, write down your API Key or copy it somewhere because you will need that when we start coding.

Step 2: Additional HTML

We need to fill out our 2 other HTML pages.

Drink-results.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!--main content start-->

<section id="main-content">

<section class="wrapper">

<h3>Filter</h3>

<div class="row">

<div class="col-lg-9 main-chart">

<div class="row mt">

<div class="col-md-4 col-sm-4 mb">

<div class="white-panel pn">

<div class="white-header">

<h5>NAME GOES HERE</h5>

</div>

<div class="centered">

<img />

</div>

</div>

</div>

</div>

</div>

</div><!-- /row -->

</section>

</section>

Drink-Detail.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!--main content start-->

<section id="main-content">

<section class="wrapper">

<div class="row mt">

<div class="col-lg-9">

<h3>NAME</h3>

<div class="col-md-8 col-sm-8 mb">

<div class="white-panel pn-lg">

<div class="white-header">

<h5>Story</h5>

</div>

<div class="centered">

<p>STORY</p>

</div>

</div>

</div>

<div class="col-md-4 col-sm-4 mb">

<div class="white-panel pnl-lg">

<div class="white-header">

<h5>NAME</h5>

</div>

<div class="centered">

<img />

</div>

</div>

</div>

</div>

</div><!-- /row -->

<div class="row mt">

<div class="col-lg-9">

<div class="col-md-8 col-sm-8 mb">

<div class="white-panel pn">

<div class="white-header">

<h5>Ingredients</h5>

</div>

<div class="centered">

<ul>

<li>

<p>TEXT</p>

</li>

</ul>

</div>

</div>

</div>

<div class="col-md-4 col-sm-4 mb">

<div class="white-panel pn">

<div class="white-header">

<h5>Description</h5>

</div>

<div class="centered">

<p>DESCRIPTION</p>

</div>

</div>

</div>

</div>

</div><!-- /row -->

</section>

</section>

Those 2 pages will display our results at some point.

Step 2: Service(Model) and Controllers

We have done just the basics to get everything set up and running. We now need to dive into our controllers, models and views. What we are doing to setup is our Model. It is our call out to the Absolut Recipe DB to retrieve a JSON object that we will then send back to the controller which will then parse some data and then send it over to the view. The view will have some binding tags to “bind” the data.

Lets look at our services.js file. We used the module API to register a our service using a factory function within AngularJS. We are passing in the name of the service – ‘Occasion’- and the factory function. We have a dependency declared from our $resource. This will allow us to create a RESTful client with just a few lines of code. Since we will be using our services we need to include that in our app.js file. Replace the declaration with the following:

Lets go back into the Services.js file and we will now fill out our Occasions service. We need to return a JSON object by first calling our API and passing in any parameters that are needed. Since we want to list all of the occasions on this page we will use the occasion endpoint out on the Absolut API.

JavaScript

1

2

3

4

function($resource){

return$resource('https://addb.absolutdrinks.com/occasions/',{},{

list:{method:'GET',params:{apiKey:API_KEY}}

});

This will be our service call. We actually have 3 methods for this one call. .Query will call the RL, .Get will call the URL with parameters and .list will call our list function. A great tutorial of using REST services can be found here.

Now, lets open up controllers.js and make a call to our newly created service.

JavaScript

1

2

3

4

5

6

7

$scope.occasionData={

occasionsList:[]

};

Occasions.list({},function(data){

$scope.occasionData.occasionsList=data.result;

});

Add that into our Occasions controller method. What we are doing here is defining our data storage (occasionData) in the controllers scope so it is accessible to the view.