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'}); }]); <a name='more'></a> ---- ## 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](http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf)* ---- ## see Also * [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html) * [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html) * [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html) * [AngularJS - Routing](https://docs.angularjs.org/tutorial/step_07) * [AngularJS - Developer Documentation](https://docs.angularjs.org/guide) * [AngularJS - ShapingUP course slides](http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf) * [AngularJS - StayingSharp course slides](http://courseware.codeschool.com/staying-sharp-with-angular-js/angular2-full-small.pdf) * [Tutorials Point - AngularJS](http://www.tutorialspoint.com/angularjs/angularjs_directives.htm) * [Tutorials Point - BestPractices](http://www.tutorialspoint.com/developers_best_practices/index.htm) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)