AngularJS Template Route Provider Tutorial

Elliot Forbes · Apr 15, 2017 · 2 min read

This tutorial covers how you can utilize AngularJS’s $routeProvider in order to create a multiple page application that features one master page. The official documentation for Routing and multiple views can be found here: https://docs.angularjs.org/tutorial/step_07

Our Project

The structure of our project for this tutorial is going to look a little something like this:

index.html
scripts.js
view/
-- home.html
-- contact.html
-- about.html

With our index.html being our master page in which we define all javascript dependencies and styling for things like the nav bar and footer etc. We would then typically put all of our page specific content in their own html files. This can be incredibly handy for times when you want to make a simple change to the header of your site that you want reflected across your whole site as it means you only have to make the change in one place.

Implementation

In this tutorial we’ll define some relatively simple routes that each have their own defined controllers and templates.

var testApp = angular.module("testApp", ["ngRoute"]);

testApp.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "views/home.html",
      controller: "testController"
    })
    .when("/about", {
      templateUrl: "views/about.html",
      controller: "AboutController"
    })
    .when("/contact", {
      templateUrl: "views/contact.html",
      controller: "ContactController"
    });
});

testApp.controller("testController", function($scope) {
  $scope.home = "This is the homepage";
});

testApp.controller("AboutController", function($scope) {
  $scope.about = "You are awesome";
});

testApp.controller("ContactController", function($scope) {
  $scope.contact = "You can't contact me, go away.";
});

Our Index.html Page:

<html ng-app="testApp">
  <head>
    <title>AngularJS ng-if child scopes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
  </head>
  <body ng-controller="testController">
    <h2>Routing Tutorial</h2>

    <div ng-view></div>

    <script src="scripts.js"></script>
  </body>
</html>

And finally our 3 pages, concatenated into one gist for brevity.

<!-- OUR ABOUT.HTML -->
{{about}}
<!-- END OF ABOUT.HTML -->

<!-- OUR CONTACT.HTML -->
{{contact}}
<!-- END OF CONTACT.HTML -->

<!-- OUR HOME.HTML -->
{{home}}
<!-- END OF HOME.HTML -->