AngularJS Simple Router Example

AngularJS Simple Router Example

HTML

<script type="text/ng-template" id="index.html">
  <h1> Index </h1> {{message}}
</script>

<script type="text/ng-template" id="pages/home.html">
  <h1> Home </h1> {{message}}
</script>

<body ng-app="app">
  <div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>

  <div ng-view></div>
</body>

JavaScript

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

app.controller('mainController', function($scope) {
  $scope.message = 'Main Controller Active';
});

app.config(function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'index.html',
    controller: 'mainController'
  }).when('/about', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  }).otherwise({
    redirectTo: '/home'
  });
});