AngularJS Made Easy, by Example – Part 2; Module Definition & Routing Configuration

The second part of a series on rapidly learning the AngularJS JavaScript framework. Today I illustrate the core configuration required in an AngularJS application

In AngularJS, “routing” is the process of mapping the paths of pages within the website to Views and their associated Controllers. Within the “Configuration” folder (described in Part 1 of this series) I created a JavaScript file called “app.js”; this one file contains code that will establish the core module that provides an umbrella for the rest of this website’s AngularJS code, and mappings to define routes to every page within the application. It might sound complicated, but the script is actually pretty concise:

var app = angular.module('elearningapp' , ['ngRoute']);
	
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
	$locationProvider.html5Mode(true);

	$routeProvider
	.when('/teacher/teachingclasses',
	{
		controller: 'TeacherTeachingClassesController',
		templateUrl: '/Scripts/App/Views/TeacherTeachingClasses.html'
	})
	.when('/teacher/teachingclass/:prmTeachingClassId',
	{
		controller: 'TeacherTeachingClassStudentsController',
		templateUrl: '/Scripts/App/Views/TeacherTeachingClassStudents.html'
	})
	.when('/teacher/teachingclass/:prmTeachingClassId/student/:prmStudentId',
	{
		controller: 'TeacherTeachingClassStudentController',
		templateUrl: '/Scripts/App/Views/TeacherTeachingClassStudent.html'
	})
	.otherwise({ redirectTo: '/' });
}]);

The first line defines the “module”; in the case of my sample e-learning website I’m only going to need one, so I’ve called the JavaScript variable “app”, and the module is named “elearningapp”. Because I need to use routing facilities I need to load the AngularJS module plugin “ngRoute”, which contained within a separate script to the main AngularJS framework (see [Part 1](http://drewrobey.com/articles/bydatepublished/2013-11-05) of this series for details of required scripts).

I then establish the configuration of my AngularJS application. Note that the names of the dependencies I inject ($routeProvider and $locationProvider) appear twice; by additionally defining the names as strings during injection we will prevent JavaScript minifiers from mangling our code.

In a nutshell, the first line of code – $locationProvider.html5Mode(true); – neatens up the URL formatting in the web browser’s address bar, and facilitates simpler navigation between Views in the application. The main body of the “config” is spent attaching routes to the $routeProvider, and the syntax is quite readable; when we direct our web browser to a specific path, we should launch this controller and this templateUrl (which is the View we wish to use). Where a semicolon (“:”) appears in the “when” parameter this means that the following phrase refers to a variable parameter, and thus a valid path that would pass into the second of our routes might be: /teacher/teachingclass/tc123456

Of course the contents of the app.js configuration file will need to be updated as the application is developed, with further route maps being added to the routing table as the website is expanded.

In the next article in this series I shall describe the basic construction of my Views, and the use of Directives to encapsulate DOM manipulation.