AngularJS : basic routing with AngularUI Router (ui.router)

AngularJS : basic routing with AngularUI Router (ui.router)

by Daan De Smedt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<!--
  AngularJS
  ----------
  AngularJS : basic routing with AngularUI Router (ui.router)
-->

<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 class="navigation">
    <a ui-sref="home">Home</a>
    <a ui-sref="about">About</a>
  </div>
  <!-- ui-view container -->
  <div ui-view></div>

</div>

CSS

.navigation a {
  color:blue;
  text-decoration: underline;
  cursor:pointer;
}

JavaScript

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

/* define routes with controller & controllerAs syntax */
function RouteConfig($stateProvider, $urlRouterProvider) {
	// set default state to home
  $urlRouterProvider.otherwise("/home");
  // provide states
  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: 'views/page.html',
      controller: 'HomeController',
      controllerAs: 'vm'
    })
    .state('about', {
      url: "/about",
      templateUrl: 'views/page.html',
      controller: 'AboutController',
      controllerAs: 'vm'
    })    
}

/* define controllers */
function HomeController() {
  var vm = this;
  vm.pageTitle = "Home page";
  vm.pageContent = "Home page content";
}

function AboutController() {
  var vm = this;
  vm.pageTitle = "About us";
  vm.pageContent = "About us content";
}