Getting MEAN: Adding Angular Router

Our notes application will need more than one “page”.  I quote “page” because what we are developing is known as a “single page application”.  What that means is that the initial html file will never be reloaded.  Angular will rewrite the DOM tree when “pages” are changed and the logic of that is handled by an Angular module called angular-route.

Create git branch

As usual we begin this section by creating a branch for it.

lth@ncpws04:~/src/notes$ git branch angular-route 
lth@ncpws04:~/src/notes$ git checkout angular-route 
Switched to branch 'angular-route'

Installing angular-route

We will begin by installing the angular-route module with npm:

lth@ncpws04:~/src/notes$ npm install angular-route --save 
+ angular-route@1.6.6 
added 1 package in 1.871s

We can now load the angular-route module from out index.html:

<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>

Finally we will need to tell Angular to depend on the angular-route module.  In our application.js, change the module definition to:

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

Defining routes

The angular-route (or ngRoute) routes are configured during the config phase, so the general definition of a route will use the following approach:

module.config(["$routeProvider",  
    function($routeProvider) { 
        $routeProvider 
            .when("/about", { 
                templateUrl: "views/about.html" 
            }); 
    } 
]);

In principle this could be put directly in our main application.js and at the moment that would be fine.  However, as projects tend to grow this can become unmanageable real quick.  Instead it is better to divide it into different files.  We therefore create two new directories under our src directory.

lth@ncpws04:~/src/notes$ mkdir src/routes

lth@ncpws04:~/src/notes$ mkdir src/views

Next step will be to create two new route modules, one for our “home page” and one for an “about page”.  Each of these will consist of a route definition and a template.

Let us deal with the “home page” first.  First we create the file src/routes/home.route.js:

/* 
 * Home Route 
 */ 
(function() { 
 
    var module = angular.module("home-route", []); 
 
    module.config(["$routeProvider",  
        function($routeProvider) { 
            $routeProvider 
                .when("/", { 
                    templateUrl: "views/home.html" 
                }) 
                .otherwise({ 
                    redirectTo: "/" 
                }); 
        } 
    ]); 
 
})(); 
/* 
 * vim: ts=4 et nowrap autoindent 
 */

What we are doing here is to define a new Angular module, which essentially do nothing (at the moment) except configure a single route.

The whole module is enclosed in a Javascript anonymous function.

Now the template file src/views/home.html:

<h1>Welcome</h1> 
<p> 
    Welcome to Notes! 
</p> 
<!--+ 
    | vim: ts=4 et nowrap autoindent 
    +-->

We can now repeat this for our “about” page.  First src/routes/about.route.js:

/* 
 * About Route 
 */ 
(function() { 
 
    var module = angular.module("about-route", []); 
 
    module.config(["$routeProvider",  
        function($routeProvider) { 
            $routeProvider 
                .when("/about", { 
                    templateUrl: "views/about.html" 
                }); 
        } 
    ]); 
 
})(); 
/* 
 * vim: ts=4 et nowrap autoindent 
 */

And src/views/about.html:

<h1>About Notes</h1> 
<p> 
    Notes is a demo application using the MEAN stack. 
</p> 
<!--+ 
    | vim: ts=4 et nowrap autoindent 
    +-->

We now have two new angular modules defined in two new files, so these needs to be included in our index.html:

<script type="text/javascript" src="routes/home.route.js"></script>                                                                                                                                           
<script type="text/javascript" src="routes/about.route.js"></script>  

While we are editing the index.html we might as well make a few more changes.  First we should change the navbar to include the link to the about page:

<header class="mb-3">                                                                                                                                                                                         
    <nav class="navbar navbar-dark bg-primary navbar-expand-md">                                                                                                                                              
        <a class="navbar-brand" href="#!">Notes</a>                                                                                                                                                           
                                                                                                                                                                                                                      
        <button class="navbar-toggler" data-toggle="collapse" data-target="#headerbar-collapse">                                                                                                              
            <span class="navbar-toggler-icon"></span>                                                                                                                                                         
        </button>                                                                                                                                                                                             
                                                                                                                                                                                                                      
        <div id="headerbar-collapse" class="collapse navbar-collapse">                                                                                                                                        
            <ul class="navbar-nav">                                                                                                                                                                           
                <li class="nav-item">                                                                                                                                                                         
                    <a class="nav-link" href="#!about">About</a>                                                                                                                                              
                </li>                                                                                                                                                                                         
            </ul>                                                                                                                                                                                             
        </div>                                                                                                                                                                                                
    </nav>                                                                                                                                                                                                    
</header>

Finally the part that angular-route should “manage” needs to be changed:

<div class="container-fluid"> 
    <section ng-view/> 
</div> 

The attribute “ng-view” result in this element being filled with the contents of our template.

The final change necessary is to instruct Angular to depend on our two new modules.  Change the app definition in src/application.js:

var app = angular.module("notes", [ 
    "ngRoute",  
    "home-route",  
    "about-route" 
]);

The pages now look like this:

Summary

We now have a nice application with two different pages.  The directory structure is like this:

.
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── server.js
└── src
 ├── application.js
 ├── index.html
 ├── routes
 │   ├── about.route.js
 │   └── home.route.js
 └── views
 ├── about.html
 └── home.html

The complete index.html:

<!DOCTYPE html>                                                                                                                                                                                                       
<html ng-app="notes">                                                                                                                                                                                                 
    <head>                                                                                                                                                                                                            
        <title>Notes App</title>                                                                                                                                                                                      
                                                                                                                                                                                                                      
        <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>                                                                                                             
    </head>                                                                                                                                                                                                           
    <body ng-controller="BodyController as bodyCtrl">                                                                                                                                                                 
        <header class="mb-3">                                                                                                                                                                                         
            <nav class="navbar navbar-dark bg-primary navbar-expand-md">                                                                                                                                              
                <a class="navbar-brand" href="#!">Notes</a>                                                                                                                                                           
                                                                                                                                                                                                                      
                <button class="navbar-toggler" data-toggle="collapse" data-target="#headerbar-collapse">                                                                                                              
                    <span class="navbar-toggler-icon"></span>                                                                                                                                                         
                </button>                                                                                                                                                                                             
                                                                                                                                                                                                                      
                <div id="headerbar-collapse" class="collapse navbar-collapse">                                                                                                                                        
                    <ul class="navbar-nav">                                                                                                                                                                           
                        <li class="nav-item">                                                                                                                                                                         
                            <a class="nav-link" href="#!about">About</a>                                                                                                                                              
                        </li>                                                                                                                                                                                         
                    </ul>                                                                                                                                                                                             
                </div>                                                                                                                                                                                                
            </nav>                                                                                                                                                                                                    
        </header>                                                                                                                                                                                                     
                                                                                                                                                                                                                      
        <div class="container-fluid">                                                                                                                                                                                 
            <section ng-view/>                                                                                                                                                                                        
        </div>                                                                                                                                                                                                        
                                                                                                                                                                                                                      
        <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>                                                                                                                         
        <script type="text/javascript" src="node_modules/popper.js/dist/umd/popper.min.js"></script>                                                                                                                  
        <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>                                                                                                                
        <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>                                                                                                                            
        <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>                                                                                                                
                                                                                                                                                                                                                      
        <script type="text/javascript" src="routes/home.route.js"></script>                                                                                                                                           
        <script type="text/javascript" src="routes/about.route.js"></script>                                                                                                                                          
                                                                                                                                                                                                                      
        <script type="text/javascript" src="application.js"></script>                                                                                                                                                 
                                                                                                                                                                                                                      
    </body> 
</html> 
<!--+ 
    | vim: ts=4 et nowrap autoindent 
    +-->

And the complete application.js:

/*                                                                                                                                                                                                                    
 * Angular Application                                                                                                                                                                                                
 */                                                                                                                                                                                                                   
(function() {                                                                                                                                                                                                         
                                                                                                                                                                                                                      
    var app = angular.module("notes", [                                                                                                                                                                               
        "ngRoute",                                                                                                                                                                                                    
        "home-route",                                                                                                                                                                                                 
        "about-route"                                                                                                                                                                                                 
    ]);                                                                                                                                                                                                               
                                                                                                                                                                                                                      
    app.run(["$log",                                                                                                                                                                                                  
        function($log) {                                                                                                                                                                                              
            $log.debug("Angular Application notes is running");                                                                                                                                                       
        }                                                                                                                                                                                                             
    ]);                                                                                                                                                                                                               
                                                                                                                                                                                                                      
    app.controller("BodyController", ["$log",                                                                                                                                                                         
        function($log) {                                                                                                                                                                                              
            $log.debug("BodyController: starting");                                                                                                                                                                   
                                                                                                                                                                                                                      
            var that = this;                                                                                                                                                                                          
            that.angularVersion = angular.version.full;                                                                                                                                                               
                                                                                                                                                                                                                      
        }                                                                                                                                                                                                             
    ]);                                                                                                                                                                                                               
                                                                                                                                                                                                                      
})();                                                                                                                                                                                                                 
/*                                                                                                                                                                                                                    
 * vim: ts=4 et nowrap autoindent                                                                                                                                                                                     
 */

 

Commit and push to git

lth@ncpws04:~/src/notes$ git add * 
The following paths are ignored by one of your .gitignore files: 
node_modules 
Use -f if you really want to add them. 
lth@ncpws04:~/src/notes$ git commit -a -m "Added routing" 
[angular-route 1048fc1] Added routing 
 8 files changed, 88 insertions(+), 9 deletions(-) 
 create mode 100644 src/routes/about.route.js 
 create mode 100644 src/routes/home.route.js 
 create mode 100644 src/views/about.html 
 create mode 100644 src/views/home.html 
lth@ncpws04:~/src/notes$ git push --set-upstream origin angular-route 
Counting objects: 13, done. 
Delta compression using up to 4 threads. 
Compressing objects: 100% (13/13), done. 
Writing objects: 100% (13/13), 1.69 KiB | 0 bytes/s, done. 
Total 13 (delta 6), reused 0 (delta 0) 
remote: Resolving deltas: 100% (6/6), completed with 5 local objects. 
To github.com:lbthomsen/notes.git 
 * [new branch]      angular-route -> angular-route 
Branch angular-route set up to track remote branch angular-route from origin.

1 thought on “Getting MEAN: Adding Angular Router

Leave a Comment