AngularJS : basic routing with $routeProvider

AngularJS : basic routing with $routeProvider and assigning controller As on route definition. View templates are binded using the text/ng-template tag.

by Daan De Smedt

HTML

<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<!--
  AngularJS
  ----------
  basic routing with $routeProvider and assigning controller As on route definition. 
  View templates are binded using the text/ng-template tag. Inject 'ngRoute' as dependency. 
-->

<div ng-app="app">

  <!-- page view template file -->
  <script type="text/ng-template" id="views/page.html">
    <h1>{{::vm.pageTitle}}</h1>
    <p>{{::vm.pageContent}}</p>
  </script>

  <!-- navigation -->
  <div>
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>
  <!-- ng-view container -->
  <div ng-view></div>

</div>

JavaScript

angular
  .module('app', ['ngRoute'])
  .controller('HomeController', HomeController)
  .controller('AboutController', AboutController)
  .config(RouteConfig)

/* define routes with controller & controllerAs syntax */
function RouteConfig($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/page.html',
      controller: 'HomeController',
      controllerAs: 'vm'
    })
    .when('/about', {
      templateUrl: 'views/page.html',
      controller: 'AboutController',
      controllerAs: 'vm'
    })
    .otherwise('/home');
}

/* define controllers */
function HomeController() {
  /* declare VM */
  var vm = this;
  vm.pageTitle = "Home page";
  vm.pageContent = "Sed laoreet egestas enim vitae porttitor. Donec at nibh vel augue varius interdum et eget lorem. Nulla augue mauris, egestas pulvinar viverra eu, pellentesque nec leo. Integer luctus sem ac tincidunt elementum. Vivamus vitae euismod massa, ut luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ornare felis ut tortor aliquam, eget sollicitudin lacus rhoncus. Curabitur laoreet lacus nec leo posuere, sit amet rutrum lorem hendrerit. Curabitur magna orci, condimentum a enim sit amet, interdum ultrices diam. Aenean consequat tempor erat. Nunc a egestas enim. In ut ullamcorper sem, a sodales mauris. Aenean nec risus libero. Sed ac libero a ante consequat iaculis eu nec ex.";
}

function AboutController() {
  /* declare VM */
  var vm = this;
  vm.pageTitle = "About us";
  vm.pageContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec luctus nisi. Fusce in tincidunt ipsum, non bibendum magna. Quisque fermentum dolor ut urna rhoncus, in porta diam mollis. Nam odio magna, eleifend ut dictum vitae, varius at libero. Etiam lorem diam, blandit at tellus eget, ullamcorper hendrerit mi. Nulla neque sapien, dictum sit amet ultrices et, volutpat non quam. Praesent pulvinar id nibh a mattis. Sed lobortis efficitur...