This article illustrates the basic routing function of Angularjs through Ng-route. Share to everyone for your reference, specific as follows:
Why front-end routing is required ~
(1) Ajax does not leave a history historical record
(2) The user cannot enter the application specified page via URL (bookmark, share, etc.)
(3) Ajax is a disaster for SEO
1. In general, when we visit the Web page, it is through the URL address.
For example, we visit a Web page: https://www.baidu.com/index/fix.html
Route through "#" in Angularjs for different pages, such as:
Https://www.baidu.com/#/first, when the request is transmitted to the Web end, the server automatically ignores the content after #, so you can use the #+ tag to help us distinguish between different logical pages and bind different pages to the corresponding controller.
This is a simple routing control interface, according to the links in the #/first and #/second, respectively, to jump to different pages.
2. Through the Angularjs in the routing module, to achieve Ng-route steps
(1) Load the JS file containing Ng-route
(2) contains the Ngroute module as the main application module of the dependent module.
(3) using native instruction Ng-view
(4) We define links in HTML to implement a single page application, such as a link can be defined as:
<body> <ul> <li><a href= "#/" > Home </a></li> <li><a href= "# /first "> First page </a></li> <li><a href=" #/second "> second page </a></li> < Li><a href= "#/third" > Third page </a></li> </ul> <div ng-view></div> </body>
The routing code defined in JS is:
Angular.module (' MyApp ', [' Ngroute '])
. 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) We look at the effect, the first time when there is no link switch, the default jump to the home page, the effect is as follows:
When clicking on the link in turn, the value in Ng-view is switched, and the content in Ng-view is replaced.
I) Initial effect
II) the effect after switching
We find that the only change is the value after the #, and no page jumps and refreshes
Routing Settings object in 3.angularJS
Angularjs routing can also be implemented through different templates.
$routeProvider. The first parameter of the When function is a URL or url regular rule, and the second parameter is a routing 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 explanation:
(1) Template:
With this overview, you can write HTML content in template, typically:
When ('/', {Template: ' This is homepage page '})
(2) Templateurl:
If we do not want HTML content now, we need a template file to replace the whole, examples are as follows:
$routeProvider. When ('/computers ', {
templateurl: ' views/computers.html ',
});
(3) A controller:function, string, or array type that performs a controller function on the current template to generate a new scope.
You can also correspond to the name of the controller.
(4) Redirectto: redirected Address
(5) Resolve: Other modules on which the current controller is dependent ~
More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"
I hope this article will help you to Angularjs program design.
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
