This example describes how AngularJS implements basic routing functions through ng-route. We will share this with you for your reference. The details are as follows:
Why frontend routing ~
(1) AJAX will not keep History
(2) the user cannot access the page specified by the application through the URL (bookmarks, shares, etc)
(3) AJAX is a disaster for SEO
1. Generally, when we access a webpage, we use a url address.
For example we visit a Web page: https://www.baidu.com/index/fix.html
In AngularJS, "#" is used to route different pages, for example:
Bytes.
This is a simple routing control interface, jump to different pages according to the #/first and #/second in the link.
2. Implement the ng-route step through the routing module in angularjs
(1) load JS files containing ng-route
(2) the ngRoute module is included as the dependency module of the main application module.
(3) use native commands ng-view
(4) We define links in html to implement a single-page application. For example, links can be defined as follows:
|
<Body>
<Ul>
<Li> <ahref = "#/"> homepage </a> </li>
<Li> <ahref = "#/first"> Page 1 </a> </li>
<Li> <ahref = "#/second"> page 2 </a> </li>
<Li> <ahref = "#/third"> Page 3 </a> </li>
</Ul>
<Divng-view> </div>
</Body>
|
The routing code defined in js is:
|
Angular. module ('myapp', ['ngroup'])
. Config (['$ routeProvider', function ($ routeProvider ){
$ RouteProvider. when ('/', {template: 'This is the homepage page '})
. When ('/first', {template: 'This is the first page '})
. When ('/second', {template:' This is the second page '})
. When ('/third', {template:' This is the third page '})
. Otherwise ({redirectTo :'/'});
}]);
|
(6) let's look at the effect. When there is no link switching for the first time, the page will jump to the homepage by default. The effect is as follows:
When the link is clicked in turn, values in ng-view are switched in turn, and content in ng-view is replaced ~
I) initial effect
II) effect after switching
We found that only the value after # is changed, and there is no page jump or refresh
3. Set the routing object in angularJS
AngularJS routing can also be implemented using different templates.
$ RouteProvider. when the first parameter of the function is the URL or URL regular rule, and the second parameter is the route configuration object.
The routing configuration object syntax rules 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:
(1) template:
This overview allows you to write HTML content in a template. A typical example is:
|
When ('/', {template: 'This is the homepage page '})
|
(2) templateUrl:
If we do not want HTML content, we need a template file to replace it as a whole, for example:
|
$ RouteProvider. when ('/computes ',{
TemplateUrl: 'Views/computers.html ',
});
|
(3) controller: function, string, or array type. Execute the controller function on the current template to generate a new scope.
It can also correspond to the controller name.
(4) redirectTo: redirection address
(5) resolve: other modules on which the current controller depends ~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
