Keynote: AngularJS Routing

Angular JS

Take a look on the previous article to refresh your memory

• Angular JS Basics shornotes.
• Angular JS Do the regular things.
• Angular JS Do the custom things.

Routing

With using an Angular module called ngRoute u can to create a layout template and to have multiple views by adding routing.

• So, when you now navigate to app/, you are redirected to app/index.html/#/users and the users list appears in the browser.
• Or, when u click add note the url changes to app/index.html#notes/new so template for adding the new note is displayed.

---

Add the application routing

To use routing u've to declare your module with ngRoute dependency.

app.js

angular.module('MyApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider

  .when('/notes', {
    templateUrl: 'templates/pages/notes/index.html'
  })
  .when('/users', {
    templateUrl: 'templates/pages/users/index.html'
  })
  .when('/notes/new', {
    templateUrl: 'templates/pages/notes/edit.html'
  })
  .when('/', {
    redirectTo: '/users'
  })
  .otherwise({redirectTo: '/notes'});
}]);

Inline controller logic into your routing

angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
  .when('/', {
    redirectTo: '/users'
  })
  .when('/users', {
    templateUrl: 'templates/pages/users/index.html',
    controller: function($http){
      var controller = this;
      $http.get('/notes').success(function(data){
          controller.notes = data;
      });
  })
  .when('/notes/new', {
    templateUrl: 'templates/pages/notes/edit.html'
  })
  .otherwise({
    redirectTo: '/notes'
  });
}]);

---

Move controller outside your logic and attach it in your routing

angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
  .when('/', {
    redirectTo: '/users'
  })
  .when('/users', {
    templateUrl: 'templates/pages/users/index.html'        
  })
  .when('/users/new', {
    templateUrl: 'templates/pages/notes/edit.html',
    controller: 'UsersCreateController',
    controllerAs: 'usersCtrl'
  })
  .otherwise({
    redirectTo: '/notes'
  });
}]);

notes-create-controller.js

angular.module('MyApp')
.controller('UsersCreateController', [function() {
  this.saveNote = function(user){
    $http({method: 'POST', url: '/users', data: user});
  };
}]);

edit.html

  <div class="new-note">
   <div class="new-note-container">
    <form class="form">
      <fieldset>
        <label for="name">Name</label>
        <input name="name" ng-model="user.name"/>
      </fieldset>
      <fieldset>
        <label for="phone">Phone</label>
        <!--saving input into ng-model as 'phone' property-->
        <input name="description" ng-model="user.phone"/>
      </fieldset>
      <fieldset>
        <label for="adress">Adress</label>
        <!--saving input into ng-model as 'adress' property-->
        <input name="adress" ng-model="user.adress"/>
      </fieldset>      
        <!--using controller from routing to save 'user' data object-->
        <button class="btn" ng-click="usersCtrl.saveUser(user)">Save</button>
    </form>
   </div>
 </div>

---

Gain access to parameters

We can gain access to the note's id in the following URL:
http://example.com/#/users/27 by injecting the $routeParams service into the UsersShowController.

angular.module('MyApp')
.controller('UsersShowController', function($http, $routeParams) {
    var controller = this;
    $http({method:'GET', url:'/users/' + $routeParams.id}).success(function(data){
       controller.user = data; 
    });   
});

The most of examples are taken from AngularJS - ShapingUP course slides

see Also

• Keynote: AngularJS Do the custom things
• Keynote: AngularJS Do the regular things
• Keynote: AngularJS Basics
• AngularJS - Routing
• AngularJS - Developer Documentation
• AngularJS - ShapingUP course slides
• AngularJS - StayingSharp course slides
• Tutorials Point - AngularJS
• Tutorials Point - BestPractices
• Keynote: Top JS frmeworks 2015