AngularJS routing
In this chapter we will introduce AngularJS routing to you.
AngularJS routing allows us to access different content through different URLs.
AngularJS can realize single page web application (SPA) for multi-views.
Usually our URL is http://runoob.com/first/page, but in a single page web application, AngularJS is implemented through #+ tags, for example:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
When we click any of the above links, the address we requested to the server is the same (http://runoob.com/). Because the content after the # number will be ignored by the browser when requesting it to the server. So we need to implement the function of the content after the # number on the client. AngularJS routing helps us distinguish different logical pages and bind different pages to the corresponding controller through the #+ tag.
In the above figure, we can see that two URLs are created: /ShowOrders and /AddNewOrder. Each URL has a corresponding view and controller.
Next, let's take a look at a simple example:
<html> <head> <meta charset="utf-8"> <title>AngularJS routing example- Novice tutorial</title> </head> <body ng-app='routingDemoApp'> <h2>AngularJS routing application</h2> <ul> <li><a href="#/">Home</a></li> <li><a href="#/computers">Computers</a></li> <li><a href="#/printers">Print</a></li> <li><a href="#/blabla">Other</a></li> </ul> <div ng-view></div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'This is the homepage'}) .when('/computers',{template:'This is the computer classification page'}) .when('/printers',{template:'This is the printer page'}) .otherwise({redirectTo:'/'}); }]); </script> </body></html>Running results:
AngularJS routing application
Example analysis:
1. Load the js file that implements routing: angular-route.js.
2. It contains the ngRoute module as the dependency module of the main application module.
angular.module('routingDemoApp',['ngRoute'])
3. Use the ngView directive.
<div ng-view></div>
The HTML content within this div will change according to the route changes.
Configure $routeProvider, 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 computer classification page'}) .when('/printers',{template:'This is the printer page'}) .otherwise({redirectTo:'/'});}]);The config function of the AngularJS module is used to configure routing rules. By using configAPI, we request that $routeProvider be injected into our configuration function and to define our routing rules using $routeProvider.whenAPI.
$routeProvider provides us with the when(path,object) & otherwise(object) function defines all routes in order, and the function contains two parameters:
The first parameter is a URL or URL regular rule.
The second parameter is the routing configuration object.
Routing settings object
AngularJS routing can also be implemented through different templates.
The first parameter of the $routeProvider.when function is a URL or URL regular rule, and the second parameter is a routing configuration object.
The syntax rules for routing configuration objects are as follows:
$routeProvider.when(url, { template: string, templateUrl: string, controller: string, function or array, controllerAs: string, redirectTo: string, function, resolve: object<key, function>});Parameter description:
template:
If we just need to insert simple HTML content into ng-view, use this parameter:
.when('/computers',{template:'This is the computer classification page'})
templateUrl:
If we just need to insert the HTML template file in ng-view, use this parameter:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html',});The above code will get the views/computers.html file content from the server and insert it into the ng-view.
controller:
Function, string or array type, the controller function executed on the current template generates a new scope.
controllerAs:
string type, specify an alias for controller.
redirectTo:
The address of the redirect.
resolve:
Specifies other modules that the current controller depends on.
Example
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script><script type="text/javascript">angular.module('ngRouteExample', ['ngRoute']).controller('HomeController', function ($scope) { $scope.$route = $route;}).controller('AboutController', function ($scope) { $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' });});</script> </head><body ng-app="ngRouteExample"> <script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script> <div> <div id="navigation"> <a href="#/home">Home</a> <a href="#/about">About</a> </div> <div ng-view=""> </div> </div> </div></body></html>Running results:
HomeAbout
Home
The above is a collection of information about AngularJS routing. I hope that students who can help AngularJS programming.