Routing

  1. Overview
    1. Routing allows an AngularJS single page app to be broken into multiple views
    2. Useful for apps that grow large and complex
    3. Routing divides an app into logical views that bind to different controllers
  2. ngRoute
    1. ngRoute module is not included in main Angular library so must be added
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js">
      </script>
      
    2. Open previous project in WebStorm
    3. Add ngRoute as a dependency in app.js and register routes
      angular.module('myApp', [
      	'ngRoute'
      ]);
      
      // Register routes
      angular.module('myApp')
          .config(function($routeProvider) {
              $routeProvider
                  .when('/students', { controller: 'studentController', 
      				templateUrl: 'templates/students.html' })
                  .when('/faculty', { controller: 'facultyController', 
      				templateUrl: 'templates/faculty.html' });
          });
      
    4. Create demo.html
      <!DOCTYLE html>
      <html>
      <head>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js">
          </script>
      
          <script src="ng/app.js"></script>
          <script src="ng/facultyController.js"></script>
          <script src="ng/studentController.js"></script>
      
          <title>Routes Example</title>
      </head>
      
      <body ng-app="myApp">
          <h1>Routes Example</h1>
      
          <a href="/#/students">Students</a> |
          <a href="/#/faculty">Faculty</a>
      
          <div ng-view></div>
      
      </body>
      </html>
      
    5. Create templates/students.html
      <h2>Students</h2>
      <h3>{{ message }}</h3>
      
    6. Create templates/faculty.html
      <h2>Faculty</h2>
      <h3>{{ message }}</h3>
      
    7. Modify server.js so it serves up demo.html when the URL path is empty
      var path = require('path');
      app.get('/', function(req, res) {
          res.sendFile(path.resolve(__dirname + '/demo.html'));
      });
      
    8. Create ng/facultyController.js to set a message
      angular.module('myApp')
          .controller('facultyController', ['$scope',
              function($scope) {
                  $scope.message = 'Hello, Faculty!'
              }
          ]);
      
    9. Modify ng/studentController.js to set a different message
      angular.module('myApp')
          .controller('studentController', ['$scope',
              function($scope) {
                  $scope.message = 'Hello, Students!';
      		}
      	]);
      
    10. Restart server and access
      http://localhost:4000/
      
    11. Clicking links loads different views into ng-view div
  3. Route parameters
    1. Route parameters can be set in the path
      http://localhost:4000/detail/456
      
    2. Add route parameter :param
      $routeProvider
      	.when('/detail/:studentId', { controller: 'studentController', 
      		templateUrl: 'templates/detail.html' });
      
    3. Use $routeParams service to get route parameter
      angular.module('myApp')
          .controller('studentController', ['$scope', '$routeParams',
              function($scope, $routeParams) {
                  $scope.message = 'Students ID is ' + $routeParams.studentId;
      		}
      	]);