Angular Routing

by Rajdeep Chandra

HTML

<script type="text/ng-template" id="home.html">
  Home Page
</script>
<script type="text/ng-template" id="about.html">
  About Page
</script>
<script type="text/ng-template" id="contact.html">
  Contact Page
</script>

  <div ng-controller="myController">
    <ul>
      <li><a href="#/home">This</a></li>
      <li><a href="#/about">That</a></li>
      <li><a href="#/contact">Other</a></li>
    </ul>
      <ng-view></ng-view>
  </div>

JavaScript

var app = angular.module('myApp', []);
app.config( function ( $routeProvider ) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/about', {
      templateUrl: 'about.html'
    })
    .when('/contact', {
      templateUrl: 'contact.html'
    })
    .otherwise({
      redirectTo: '/home'
    });
});
app.controller('myController', function($scope) {});