AngularJS routing
In this section, we'll introduce you to AngularJS routing.
The AngularJS route allows us to access different content through different URLs.
AngularJS enables multi-view single-page web applications (single page web application, SPA).
Typically our URL is http://w3cschool.cn/first/page, but in a single-page Web application AngularJS is implemented by the hashtag, for example:
http://w3cschool.cn/#/first http://w3cschool.cn/#/second http://w3cschool.cn/#/third
When we click on any of these links, the address requested from the service side is the same (http://w3cschool.cn/). B ecause the content after the number is ignored by the browser when requesting from the service side. S o we need to implement the functional implementation of the content after the client implementation number. The AngularJS route helps us distinguish between different logical pages and bind different pages to the corresponding controller by using the hashtag .
In the above graphic, we can see that two URLs were created: /ShowOrders and /AddNewOrder. Each URL has a corresponding view and controller.
Let's look at a simple example:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - W3Cschool教程</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" rel="external nofollow" rel="external nofollow" ></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
Instance resolution:
-
1, loaded to implement the js file of routing: angular-route .js.
-
2, contains the ngRoute module as the main application module of the dependent module.
angular.module('routingDemoApp',['ngRoute']) -
3, the use of ngView instructions.
<div ng-view></div>
HTML content within the div changes depending on the route.
-
Configuration $routeProvider, AngularJS $routeProvider to define routing rules.
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);The config function of the AngularJS module is used to configure routing rules. By using the configAPI, we requested that $routeProvider be injected into our configuration function and that our routing rules be defined using $routeProvider.whenAPI.
$routeProvider provides us with when (path, object) and otherwise (object) functions that define all routes sequentially, and the function contains two parameters:
- The first argument is the URL or URL rule.
- The second parameter is the routing configuration object.
Route settings objects
AngularJS routing can also be implemented with different templates.
$routeProvider the first argument to the .when function is a URL or URL rule, and the second argument is a route configuration object.
The routing configuration object syntax rules are as follows:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Description of the parameters:
-
template:
Use this parameter if we only need to insert simple HTML content into ng-view:
.when('/computers',{template:'这是电脑分类页面'}) -
templateUrl:
Use this parameter if we only need to insert an HTML template file in ng-view:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });The above code is obtained from the service views/computers.html the contents of the file is inserted into the ng-view.
-
controller:
Function, string, or array type, the constant function executed on the current template, generates a new scope.
-
controllerAs:
String type, which specifies an alias for the controller.
-
redirectTo:
The address of the redirect.
-
resolve:
Specifies the other modules on which the current controller depends.
-
Instance
<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" rel="external nofollow" rel="external nofollow" ></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js" rel="external nofollow" rel="external nofollow" ></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" class="ng-scope"> <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> </body> </html>