Routing ($route) (maybe add $location) can be said to be the most important thing in ng, because the most important role of angular is to make single-page webApp, and routing can make page jumps The essential.
1. Single page webApp
Why is it called a single page webApp? Because it is single page. Well, the key is that many webApps we see are multi-page, and you can jump from one page to another. Well, it looks like this, but in fact these pages are actually still one page, because they are loaded at one time, as for why there is a jump effect? Well, kind of like tabs, eh. Its implementation principle is through hashbang before html5, and H5 is History. This article mainly discusses hashbangs. Why use #? Of course, we can directly have multiple pages, just like making a website. But the biggest problem with doing this is that you need to reload the page every time you switch. We can accept that it takes a few seconds to load when entering an app, and waiting a second or two more when switching pages while using the app will give the user a feeling that the app is stuck.
In addition, another advantage of webApp is that it can reduce the pressure on the server, and the background only provides data. Well, actually I don't quite understand this. . I'll add it later.
2. Routing (ng-route)
So how to make a single-page webapp (SPA) look like multiple pages? Is how to manage these pages? It's all about routing.
Let's take a case, this is an information management system, which manages user registration, logout, user list, user details and so on.
<!DOCTYPE html>
<html lang="en" ng-controller="userlist">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<table>
<tr ng-repeat="x in data" ng-click="detail($index)">
<td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看详情</a></td>
</tr>
</table>
</div>
</body>
</html>
I will paste a part of the html, this part is to display the user list, click the corresponding user to display their corresponding information. The reason why this part is selected is because the address parameter is required here.
Look at the js code of the corresponding pipe routing jump
m1.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/aaa",{
templateUrl:"register.html",
controller:"register"
}).when("/bbb",{
templateUrl:"cancel.html",
controller:"cancel"
}).when("/ccc",{
templateUrl:"userlist.html",
controller:"userlist"
})
.when("/ddd/:index",{
templateUrl:"detail.html",
controller:"detail"
})
.otherwise({redirectTo:"/aaa"});
}])
in
.when("/ddd/:index",{
templateUrl:"detail.html",
controller:"detail"
})
Corresponds to the user list page.
First of all, m1.config(["$routeProvider", function($routeProvider)]) is the process of injecting modules, because ng-route is a module independent of ng and is an independent js file.
Then, the parameter of the when function, the first one is the url address (the following: index will be discussed later when we talk about the address transfer). templateUrl is the address of the page to go to (template can be used if the content is small), and the controller writes the controller of the page to which it jumps.
The page url after the jump is probably as long as this: http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd
Finally, let’s talk about the problem of address transfer. In the details page, we only need to display the information of the corresponding person, that is, no matter who you click on a page, but you need to tell the details page which button is clicked , which should I render. The :index in the code represents the list index of the user you clicked (that is, which user you clicked on). The index is passed because the user information data is stored in an array. In the list page, it doesn't matter if this variable is called index or whatever, because it just occupies a hole, which means that the value passed here can be taken from this variable (of course, this name is useful in the details page that jumps to the past).
Let's see how the corresponding html is written:
<tr ng-repeat="x in data" ng-click="detail($index)">
<td>{{ x.name }}:{{ x.password }}<a href="#ddd/{{$index}}">查看详情</a></td>
</tr>
The $index here corresponds to the index of the clicked tr in this table. To be exact, x is the first item in the data. index corresponds to {{$index}}.
If parameters are added, the url of the jump page is as long as this: http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html#/ddd/0
The 0 added later is the passed parameter. If you want to get this parameter on the jump page, you can use $routeParams
m1.controller("detail",["$scope","$routeParams",function($scope,$routeParams){
$scope.index=$routeParams.index;
}]);
That is to say, the index in $routeParams.index corresponds to the one written in the when function.
As an aside, when I didn't need to pass parameters by address, the way to achieve "multi-page" communication was to write a property in $rootScope to store the data to be uploaded. After all, ng has only one $rootScope. Although I didn't think there was anything wrong with doing this, I always felt awkward in my heart.
Article source: http://www.cnblogs.com/zhangdongming/p/5397180.html