1. Krishna Mohan Koyya Glarimy Technology Services http://www.glarimy.com

2. Routing with AngularJS The Routing Provider Configuring Routes Views and Controllers Routing Parameters Local Views Routing API and Events

3. Routing Provider Brings in multi-page experience into an SPA Supports History Supports BACK button Separate Module: ngRoute The script file to be loaded separately Routing based on configuration Supports default route Populates the ng-view Resolves external template files Resolves internal local views Connects a controller Broadcasts life-cycle events Holds context

4. Configuring Routes Bootstrapping Inject ngRoute into the app module Inject $routeProvider into app configuration Configuring a route Provide the relative URL URL can be a path expression like /city/:name Provide the template URL and controller Template provides the view with all angular power View and Controller gets bounded Provide a default route, it make sense Using the rooute Appended to the context URL with a # prefix http://www.glarimy.com/root/#/city/Bengaluru Can also pass query parameters http://www.glarimy.com/root/#/city/Bengaluru?details=short

5. Configuring Routes angular.module('app', [ 'ngRoute' ]).config(function($routeProvider) { $routeProvider.when('/parks', { templateUrl : 'parks.html', controller : 'ParksController' }).when('/malls/:road', { templateUrl : 'malls.html', controller : 'MallsController' }).otherwise({ templateUrl : 'default.html' }); //define controllers and etc., });

6. Building Route Controllers angular.module('app', [ 'ngRoute' ]).config(function($routeProvider) { // configure the routes }.controller('BlrController', function($scope, $route, $routeParams, $location) { }).controller('ParksController', function($scope, $routeParams, $location){ $scope.parks = [ "Lalbagh Botanical Gardens", "Cubban Park"]; }).controller('MallsController', function($scope, $routeParams, $location){ if ($routeParams.road == 'wf') { $scope.area = 'Whitefield'; $scope.mall = 'Pheonix Mall, Mahadevpura'; } else { $scope.area = 'Central Business District'; $scope.mall = 'Forum Value Mall, Varthur'; } })

7. Using Routes Home | Parks | Malls in Whitefield | Malls in CBD

8. Using Local Views Add the local view in main HTML file City Data Airports: {{city.airports}} Add the link to route anywhere CityData Define the route in the module.config(function($routeProvider) { $routeProvider.when('/city', { templateUrl : 'cityData.html', controller : 'CityController' }) Develop the controller, as usual

9. Routing API and Events Methods reload() reloads the current route updateParams(newParams) updates the params of the URL Events $routeChangeStart: $routeChangeSuccess $routeChangeError Properties Current: The definition of the current route Controller, $scope, $template Routes: All route configurations