Now that we have everything set up on the AWS side, let’s start by building our angularjs app.

As always, we will start by downloading the forked angularjs Seed project from GitHub at https://github.com/areai51/angular-seed and getting it set up.

Before we run the npm install command, let’s add a few more dependencies to our bower.json file to install angular-animate and angular-ui-router, as we are going to use these in our project.

Please modify your bower.json file as highlighted:

{
  "name": "angular-seed",
  "description": "A starter project for angularjs",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.2.x",
    "angular-ui-router": "0.2.10",
    "angular-animate": "1.2.x",
    "angular-facebook": "",
    "angular-loader": "1.2.x",
    "angular-mocks": "~1.2.x",
    "html5-boilerplate": "~4.3.0"
  }
}

Tip

Alternatively, you could simply run the following command in the terminal:

bower install –save angular-ui-router angular-animate angular-facebook 

This will automatically add the entries to the bower.json file.

Save the file, and run the npm install command in the terminal. Next, run the npm start command; this will install the bower components and start the web server on port 8000.

You should have the site running from http://localhost:8000/app.

Building nested views using UI-Router





From all the various examples so far, we have been using ngRoute and ng-view to render our pages. It has worked fine so far because in all these cases, each of our pages was different from the other, and the entire view would change from one route URL to another.

However, when building large complex applications, we will come across scenarios where we need to create nested views and update only a certain section of the view, based on the user’s interaction.

The UI-Router, https://github.com/angular-ui/ui-router, allows us to build such nested views. Unlike the route provider, where the mapping is based on URL routes, with the UI-Router, the interface is organized as states. Let’s see how to go about using the UI-Router in our application.

Let’s start by modifying our index.html file as highlighted:

<body>
  <ul class="menu">
    <li><a href="#/toys">Toys</a></li>
    <li><a href="#/books">Books</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ui-view></div>


  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>

The first thing we do is include our angular-ui-router.js file. Next, as ui-router uses the ui-view directive, we replace ng-view with ui-view.

Finally, just so that we can test our nested views, we’ll add two dummy category links called Toys and Books.

We will also need to inject ui-route into our app as a dependency. We do this in the app.js file as highlighted:

angular.module('myApp', [
  'ui.router',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])

Make sure you remove ngRoute that comes in as a part of the boilerplate.

Mapping states to URL, views, and controllers

As the UI-Router works around states, we’ll need to map states to the corresponding URL, views, and controllers. We’ll do this in our app.js file as follows:

config(['$stateProvider',
    function($stateProvider) {
        $stateProvider.state('add', {
        	url:'/add',
            templateUrl: 'partials/add-products.html',
            controller: 'AddProductsCtrl'
        });
        $stateProvider.state('category', {
        	url:'/:category',
            templateUrl: 'partials/products.html',
            controller: 'ProductsCtrl'
        });
       	$stateProvider.state('category.products', {
        	url:'/:id',
            templateUrl: 'partials/products.details.html',
            controller: 'ProductDetailsCtrl'
        });
}
])

The first state that we define is to add products; it is mapped to the add-products.html partial and the AddProductsCtrl controller. We then define the category state and use a variable to define the category, which will be mapped to the products.html view and the ProductsCtrl controller.

The next state is a nested view where we define the product state as a subset of the category, using the dot notation. The URL is a variable called ID, which would essentially be the product ID. We again make use of the dot notation to define the partial for the products.details.html view.