Creating a Single Page Application Using AngularJS and ngRoute

3 min readFeb 1, 2016

AngularJS is a JavaScript framework created by Google.
Angular is perfect for Single Page Applications and very easy to learn!
In this post I’ll show you how to quickly create a simple Single Page Application using Angular’s routing tool, ngRoute.

First, we’ll need main page to hold all our “views”.
We’ll start out with a basic HTML page shown below:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<body>

</body>
</html>

Adding Angular and ngRoute to Our Resources

To add Angular and routing to your webpage as a resource, you’ll need to link it using the <script> tag. In this case, we’ll add it to the bottom, before the closing body tag.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<body>

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
</body>
</html>

Then we’ll add a spot for the view, it’s actually one line!

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<body>

<div ng-view></div>

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
</body>
</html>

Next we’ll add menu links for us to be able to switch between views.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<body>

<ul>
    <li><a href="#/Dashboard">Home</a></li>
    <li><a href="#/Page1">Page 1</a></li>
    <li><a href="#/Page2">Page 2</a></li>
</ul>

<div ng-view></div>

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
</body>
</html>

Creating Our Application Module

Now here comes the actual Angular. We’re going to create an App.js JavaScript file to declare our application module, and inject its dependencies. To declare an application module, we simply enter:

'use strict';angular.module(‘app’, []);

We’ll need to inject the ngRoute module if we want to be able to switch the views, which is pretty essential to a Single Page Application. Here’s what that would look like:

'use strict';

angular.module('app', [
    'ngRoute'
]);

The app module must be included in the page for Angular to do its magic, once at the top of the HTML declaration, and another as a script resource:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Single Page Application</title>
</head>
<body>

<ul>
    <li><a href="#/Dashboard">Home</a></li>
    <li><a href="#/Page1">Page 1</a></li>
    <li><a href="#/Page2">Page 2</a></li>
</ul>

<div ng-view></div>

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>

<script src="App.js"></script>
<script src="RouteProvider.js"></script>
</body>
</html>

Routing Using Angular

Next we need to create our script to do the routing. We’ll call it RouteProvider. We’ll need the provider from ngRoute, $routeProvider.

'use strict';

angular.module('app').config(function ($routeProvider){});

Now we’ll tell our router what we want it to do! When our dashboard page is called using the URL /Dashboard, we want the $routeProvider to route the view to our dashboard, which we’ll make after we’re done this section.

'use strict';

angular.module('app').config(function ($routeProvider){

    $routeProvider.
    when('/Dashboard', {
        templateUrl: "dashboard.html"
    });
});

We have to make other pages to truly implement the routing. Luckily, this is quite simple, using the same format:

'use strict';

angular.module('app').config(function ($routeProvider){

    $routeProvider.
    when('/Dashboard', {
        templateUrl: "dashboard.html"
    }).
    when('/Page1', {
        templateUrl: "page1.html"
    }).
    when('/Page2', {
        templateUrl: "page2.html"
    }).
    otherwise({
        redirectTo: '/Dashboard'
    });
});

Note the otherwise keyword. This will tell the router to redirect to this particular location when the URL isn’t recognized. We’ll want the default redirect to be our dashboard. Don’t forget to include your RouteProvider script to your main page!

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>

<script src="App.js"></script>
<script src="RouteProvider.js"></script>
</body>
</html>

Creating Page Templates

Now that our routing is ready, we need to create those pages!

Behold, the dashboard page!

<div>
    <h2>This is the dashboard!</h2>
</div>

Pretty simple, no? Our main page actually takes care of all that HTML jargon, so we just need to specify what we want on our page, however any dependencies need to be specified on our main page.

For simplicity’s sake, here are the other two pages, page1.html and page2.html:

<div>
    <h2>This is page 1!</h2>
</div><div>
    <h2>This is page 2!</h2>
</div>

We’re done!

We’ve just created a Single Page Application using Angular and ngRoute!

Play around with your work and marvel at how we can now easily create dynamic HTML pages. Cool stuff!

Until next time!

-Alec Wassill