AngularJS — Routing

Setup Routing

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

var app = angular.module('myApp', ['ngRoute']);

Route Configuration

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'ContactController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

Router Outlet

<a href="#!/home">Home</a>
<a href="#!/about">About</a>

<div ng-view></div>

Route Parameters

$routeProvider
  .when('/user/:id', {
    templateUrl: 'views/user.html',
    controller: 'UserController'
  });

app.controller('UserController', function($scope, $routeParams) {
  $scope.userId = $routeParams.id;
});

Navigation

// Programmatic navigation
$location.path('/about');

// Go back
$window.history.back();

Mini Practice

1. Set up routing
2. Create route templates
3. Use route parameters
4. Navigate programmatically

Up Next

Continue with Templates — AngularJS templates.