The ngRoute (https://docs.angularjs.org/api/ngRoute) module and the ngView (https://docs.angularjs.org/api/ngRoute/directive/ngView) directive are the secret sauces that let us write Single Page Applications (SPAs) with ease. We configure which views are to be shown for which URLs using the $routeProvider service. This service comes with the ngRoute module. This module comes with the angular-route.js library, so we have to include it separately. So, let's see them in action:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> <title>Routing example</title> </head> <body ng-app="routeApp"> Choose:<br><br> <a href="#employees">Employees</a><br> <a href="#departments">Departments</a> <div ng-view></div> <script src="app.js"></script> <script src="employee.ctl.js"></script> <script src="department.ctl.js"></script> </body> </html>
(route-ex/index.html)
First, we included the angular-route.min.js library. Then, as usual, we set up a routeApp module and then we set up two links—one each to navigate to employees and departments. Note that the links have a leading # because we don't want the browser to actually navigate to the employees.html or departments.html page. Finally, we added the ng-view directive to our div element, which works together with the $route service. It serves as the placeholder where the HTML contents of various templates are rendered as per the current route. Hence, it includes the rendered template of the current route into the main layout (index.html). The configuration of routes is done in the following app.js file:
var app = angular.module('routeApp', [
'ngRoute'
]);
app.config(function ($routeProvider) {
$routeProvider
.when('/employees', {
templateUrl: 'employee.tpl.html',
controller: 'EmployeeCtrl'
})
.when('/departments', {
templateUrl: 'department.tpl.html',
controller: 'DepartmentCtrl'
})
.otherwise({
redirectTo: '/'
});
});(route-ex/app.js)
We loaded the ngRoute module as a dependent of the routeApp module. Next, we configured various routes of the module using $routeProvider. Here, we are saying that whenever the URL matches /employees, the employee.tpl.html template should be inserted in the ng-view placeholder of the index.html file with EmployeeCtrl as the controller. This also applies to the /department URL.
The EmployeeCtrl controller in route-ex/employee.ctl.js is similar to the one in the previous example, and DepartmentCtrl in route-ex/department.ctl.js mimics it. The templates for employee view and department view are also similar, as shown here:
<br>
<div>
<h1>Employee data:</h1>
<ul>
<li ng-repeat="employee in employeeData.employees">
Employee - {{employee.name}} is - {{employee.age}} years old
</li>
</ul>
</div>(route-ex/employee.tpl.html)
Just as the employee template in the preceding code shows employee data, the department template shows department data. When you run the application and click on the employee link, you see the employee data, and ditto for the department link, without any page refreshes. Although this is a simple example, you can see how easy Angular makes it to write SPAs.
Other AngularJS directives such as ngShow, ngHide, ngChecked, and ngSelected are among the various other directives that help us in building great-looking UIs with minimal DOM manipulation code. AngularJS API docs (https://docs.angularjs.org/api) is a great place for exploring various directives, services etc. that Angular provides.