In this chapter, we will introduce AngularJS routing. AngularJS routing allows us to access different content through different URLs. Using AngularJS, we can implement a single-page web application (SPA) with multiple views. Typically, our URLs are in the form ** but in a single-page web application, AngularJS implements this using **#! + a marker**, for example: > Note: Versions prior to Angular 1.6 implemented routing using **# + a marker**. When we click any of the above links, the address requested from the server is the same ( This is because the content after the #! symbol is ignored by the browser when making a request to the server. Therefore, we need to implement the functionality for the content after the #! symbol on the client side. AngularJS routing helps us distinguish between different logical pages and bind different pages to their corresponding controllers using **#! + a marker**. !(#) In the diagram above, we can see two URLs are created: /ShowOrders and /AddNewOrder. Each URL has a corresponding view and controller. Next, let's look at a simple example: ## AngularJS Example

AngularJS Routing Application

• Home
• Computers
• Printers
• Others

angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'This is the homepage'}) .when('/computers',{template:'This is the computers category page'}) .when('/printers',{template:'This is the printers page'}) .otherwise({redirectTo:'/'}); }]); [Try it »](#) Example Analysis: * 1. Loaded the JavaScript file for implementing routing: angular-route.js. * 2. Included the ngRoute module as a dependency module for the main application module. angular.module('routingDemoApp',['ngRoute']) * 3. Used the ngView directive. The HTML content inside this div will change based on the route. * 4. Configured $routeProvider. The AngularJS $routeProvider is used to define routing rules. module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'This is the homepage'}) .when('/computers',{template:'This is the computers category page'}) .when('/printers',{template:'This is the printers page'}) .otherwise({redirectTo:'/'});}]); The config function of an AngularJS module is used to configure routing rules. By using the config API, we request to inject $routeProvider into our configuration function and use the $routeProvider.when API to define our routing rules. $routeProvider provides us with the when(path, object) & otherwise(object) functions to define all routes sequentially. The functions contain two parameters: * The first parameter is a URL or a URL regular expression rule. * The second parameter is the route configuration object. * * * ## Route Configuration Object AngularJS routing can also be implemented using different templates. The first parameter of the $routeProvider.when function is a URL or a URL regular expression rule, and the second parameter is the route configuration object. The syntax for the route configuration object is as follows: $routeProvider.when(url, { template: string, templateUrl: string, controller: string, function or array, controllerAs: string, redirectTo: string, function, resolve: object}); Parameter Description: * **template:** Use this parameter if we only need to insert simple HTML content into ng-view: .when('/computers',{template:'This is the computers category page'}) * **templateUrl:** Use this parameter if we only need to insert an HTML template file into ng-view: $routeProvider.when('/computers', { templateUrl: 'views/computers.html',}); The above code will fetch the content of the views/computers.html file from the server and insert it into the ng-view. * **controller:** A function, string, or array type. The controller function executed on the current template, generating a new scope. * **controllerAs:** A string type, specifying an alias for the controller. * **redirectTo:** The address to redirect to. * **resolve:** Specifies other modules that the current controller depends on. ### Example ## AngularJS Example angular.module('ngRouteExample', ['ngRoute']) .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) .controller('AboutController', function ($scope, $route) { $scope.$route = $route;}) .config(function ($routeProvider) { $routeProvider. when('/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' }). when('/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); });

Home

About

[Try it »](#)