In a single-page application such as an angular application, we need to allocate different resources according to the change of the url (ie: different requests). Determine which module to execute according to the requested URL. This process is called routing. At the same time, we need to design routing rules.
A simple little demo is given below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS routing</title>
</head>
<app-body = 'rootApp'>
<ul>
<li><a href='#/'>主页</a></li>
<li><a href='#/floor1'>一楼</a></li>
<li><a href='#/floor2'>二楼</a></li>
</ul>
<!-- ng-view rendering station -->
<view-div> </div>
</body>
<!-- Below is the rendering template -->
<script id='tmpl' type='text/ng-template'>
<h1>{{placeholder}}</h1>
</script>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script src='angular-route.min.js'></script>
<script src="app.js"></script>
</body>
</html>
app.js
/* Define the module here. Since you need to set the route, you need to inject ngRoute */
var rootApp = angular.module('rootApp', ['ngRoute']);
/* Define the routing table (routing rules) */
rootApp.config(['$routeProvider', function($routeProvider)) {
/* $routeProvider is equivalent to the traffic police, directing the route according to when and otherwise*/
$routeProvider
.when('/', {
// When the requested "URL" / , find the currently defined controller and view
controller: 'DefaultController',
/* template: '<h1>{{hello}}</h1>' */
templateUrl: 'tmpl'
})
.when('/floor1/1', {
controller: 'Floor1',
templateUrl: 'tmpl'
})
/* Here use the form of :id to save the routing parameters so that they can be retrieved later with $routeParams*/
.when('/floor2/:id/:name/:age', {
controller: 'Floor2',
templateUrl: 'tmpl'
})
.otherwise({
/* No match, redirect to root directory */
redirectTo: '/'
});
}]);
// define the associated controller
rootApp.controller('DefaultController', ['$scope', function($scope) {
$scope.placeholder= 'Currently the homepage';
}]);
rootApp.controller('Floor1', ['$scope', function($scope) {
$scope.placeholder = 'Currently the 1st floor';
}]);
rootApp.controller('Floor2', ['$scope', '$routeParams', function($scope, $routeParams) {
/* $routeParams is used to parse request parameters */
console.log($routeParams);
$scope.placeholder= 'Currently the second floor';
}]);
running result:
Enter file:///C:/Users/bijian/Desktop/Angular%20route/app.html#/ to display "Currently the home page".
Enter file:///C:/Users/bijian/Desktop/Angular%20route/app.html#/floor1/1, and it displays "currently the first floor".
Enter file:///C:/Users/bijian/Desktop/Angular%20route/app.html#/floor2/2/lisi/18, it shows "currently the second floor".
Summarize
The routing in angular needs to use its ngRoute module. The specific usage method is as shown above. The design of the routing table is to configure the when and otherwise of the $routeProvider through the module to handle different request parameters.
Among them, ng-view is used to occupy the pit, and the template or templateUrl in when is used to render the data defined by the control layer to fill in the pit. The routing parameters are specified according to :parmName, and the parameters are parsed by $routeParams.
Article source: http://blog.csdn.net/Tyro_java/article/details/51532135