Lesson 2: Angular Tutorial and Journey - Introducing Modules, Services & Routes

We will be building on Lesson-1 during this tutorial. We learned the following:

1. Using Git, clone the app & get checkout a version using "git checkout v1.0"
2. We created a very simple app which displays a list of devices
3. The list of devices is stored in a simple js array for the moment
4. We are using bootstrap to prettify the display
5. We created a simple angular 2-way binding between Model ($scope) & the view. We also created a simple controller which fills our model

This lesson we will start with extending the basic app & making it more modular. You can write the full  angular app in one javascript file & a single HTML file. But that will not be good right... So, angular provides some good mechanisms for us to organize our code better. 

Modules & Services

Angular modules provide a mechanism to create services that our app utilizes. Essentially we can group common functionality within modules & then it can be utilized anywhere within the app. We will first create a service module which will move the static list of devices from the controller to a service. 

We will create a simple DeviceModule which will abstract our list of devices. The following Gist shows how to do it following the module definition paradigm that angularjs prescribes.

• Create new file called deviceService.js
• Define 'DeviceModule' as an angular module using angular.module('DeviceModule', []);
• Factory provides a singleton module that we can utilize within our app & provides the list of devices that we can use in our Model. 

Gist -->  Angular DeviceModule

Routes

Routes provide a mechanism which will help organize our project even better and also allows us to create multi-page views.

NOTE:- ROUTES will require setting up an HTTP Server, which will cover at the end. We will setup a nginx server.

STEP 1:
   Simplify our main.html even further by introducing ng-view tag. Move the rest of the functional aspects into separate view html files and controllers.



Step 2:
  Create a listDevices.html which will instantiate the ng-controller & uses ng-repeat to show the devices



Step 3:
   Lets work on the controller to call our deviceModule & populate our model $scope with the list of devices. Lets also create a route which maps a controller to a view.



By the end of this you should have the same app in Lesson-1, but much more structured and modular. The service module abstracts our device Items, we split our html into multiple views which can be managed via routes.

But to make all this work, we need a http server setup that can run our app. The basic steps are listed below.

1. install ngnix on your machine: brew install nginx
2. start nginx
3. If you go to http://localhost:8080 you should see "Welcome to nginx"

Next we need to make sure nginx is pointing to our angular app directory, so it can serve all our assets. But first where is the nginx config file located? Depending on your installation.... In my case it is in /opt/local/etc/nginx/nginx.conf or /usr/local/etc/nginx/nginx.conf

You have to do sudo to edit this config & save it.

Lets tell nginx to listen on port 80 and serve files from our app directory. The below location config entry tells nginx to serve from your app directory, when you enter http://localhost/cotd


      #snip other entries
      server {
        listen       80;
        server_name  localhost;

        location / {
            root   share/nginx/html;
            index  index.html index.htm;
        }
        location /cotd {
            alias /Users/username/angular/cotd/;
            index  main.html;
        }

        #snip other config entries

But, one problem I see is that the styles are all bad. Looks like the bootstrap CSS file is not being served. To fix this lets create an assets directory and copy the bootstrap files into the assets directory.

Now if you do http://localhost/cotd  everything looks good.

You can also get the latest code by doing:

git checkout v1.2

This should show you the assets directory with bootstrap files in it. If you have configured the nginx server as described above you should be able to see the simple device listing with bootstrap styling at http://localhost/cotd