Routing in Angular.js

Series “Developing applications on single-Angular.js”

1. Why do I need Angular.js and why he
2. Modern tools and framework Angular.js frontend applications
3. Familiarity with controllers and directives Angular.js
4. Writing Services in Angular.js
5. Routing in Angular.js
6. How to connect to the API backend Angular.js

We are approaching the end of our guidance for Angular.js. There are only two articles: and this is another. In this we consider the Angular.js UI Router – a library to organize navigation between different parts of our application. At the same time, we can rewrite our code so that it uses the templates, instead of storing the entire html to a single file.

Templates in our application are stored in src/app/app_part/. Under app_part I mean a separate part of the application. Now we only main, but in the future may be in the same sub-folder settings, categories and everything else. Fast forward the entire central portion containing the form to add transactions and table with transactions in src/app/main/transactions.html and replace it with:

<div class="col-xs-6" ui-view></div>

It is also necessary to remove the ui-view from above of the container level. Thus, in src/index.html inside the body tag in addition to the script tags we still have the following layout:

<div class="container">
  <div class="col-xs-2" ng-controller="NavigationCtrl as navigation_ctrl">
    <h2>Money</h2>
    <h3 class="money-ok">
      {{navigation_ctrl.transactions_store.sum()}}
    </h3>
    <ul class="nav nav-pills nav-stacked">
      <li>
        <a>
          <i class="glyphicon glyphicon-th-list"></i>
          Transactions <span class="badge">{{navigation_ctrl.transctions_store.transactions.length}}</span>
        </a>
      </li>
      <li>
        <a>
          <i class="glyphicon glyphicon-tasks"></i> Settings
        </a>
      </li>
    </ul>
  </div>
  <div class="col-xs-6" ui-view></div>
</div>

Now we have nothing works, because we did not specify what kind of UI Router’u template output in ui-view at the root link. That’s what this library and deals with: inserts ui-view template corresponding to the application settings.

So, we update src/app/index.js :

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('transactions', {
      url: "/",
      templateUrl: "app/main/transactions.html"
    });
    $urlRouterProvider.otherwise('/');
  });

We use the function of config() to configure the various service providers (one of the types of services), before they begin to be used in other parts of the application.

Here, through a chain of calls to the function state() on the service $stateProvider we specify which template to display inside the ui-view for each page. The last line, $urlRouterProvider.otherwise('/'); said Angular’u what address to redirect the user if the requested route does not exist. Our app now again should work as before.

Few analogies for those familiar with Ruby on Rails: ui-view can be compared with the yield in rail templates and call chain state() – a file routes.rb.

Let’s try to add a real navigation: to link transactions led to the table with the transactions, and settings for future user settings page.

We update our list of routes:

'use strict';
angular.module('ngmkdev', ['restangular', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('transactions', {
      url: "/transactions",
      templateUrl: "app/main/transactions.html"
    })
    .state('settings', {
      url: "/settings",
      templateUrl: "app/settings/settings.html"
    })

    $urlRouterProvider.otherwise('/transactions');
  });

And add the file app/settings/settings.html with such content:

<h2>Settings</h2>

Now, any nonexistent path will be redirected to the page with the transaction. Try to open the following path: http://localhost:3000/, http://localhost:3000/#/transactions, http://localhost:3000/#/settings, http://localhost:3000/#/crap.

Sense from the manual driving bit addresses, so revive links in the sidebar. To this end, there is UI Router directive ui-sref, stating the name of the State (the first argument to the function state ()), which is due to open by clicking on the following link:

<li>
  <a ui-sref="transactions">
    <i class="glyphicon glyphicon-th-list"></i>
    Transactions <span class="badge">{{navigation_ctrl.transctions_store.transactions.length}}</span>
  </a>
</li>
<li>
  <a ui-sref="settings">
    <i class="glyphicon glyphicon-tasks"></i> Settings
  </a>
</li>

That’s enough to our menu earned – by clicking on the links the central part of the application changes. Commit to the changes done in the article: 448daee.

Homework:

• Refer to the documentation UI Router way to highlight the current menu item