If you are to build a Single Page Application using AngularJS, with no page reloading, yet with navigation between different pages, routing should be used and you would be working with the ngRoute module. Let's see how we could create a simple SPA with some routing.

First: lets start by creating the required files.

  • index.html – main HTML file of our SPA
  • app.js – main Javascript file
  • /templates/home.html – home view
  • /templates/contact.html – contact us view

Lets start with the index.html file. We will be needing the angular.js and angular-route.js files in order to start building our SPA.

A $routeProvider is defined to display the respective pages once the url is changed. .when() is used to define the possible conditions. .otherwise() can be used to display a page when none of the conditions are met.

Next we'll create the pages that are to be rendered once the links are clicked.

templates/home.html:

<h1>This is Home</h1>

templates/contact.html:

<h1>This is 'Contact Us' page</h1>