Home > Developer > Web Develop
In a single page, we can add multiple modules so that the Web page loads the module only when it is needed. The switch of the module can basically replace the switch of the webpage, so we can realize the switch of the webpage through the switch of the module, this switch is loaded on demand.
At first glance very ordinary things, but think carefully can be found that this idea can solve a lot of resources.
For example, if there is a page that needs to display information about 1000 items, each of which behaves differently (with their own independent CSS and JS), then generally we need to prepare 1000 pages to load the information. However, with this modular idea, we can only set up 1000 different modules in the background, and then load the corresponding modules of the required products onto a single page as needed.
To do so, the functionality described above must be routed.
Main idea:
1. Set up multiple independent modules in the background
2. Establish a Routing control module
3. The module is loaded onto the home page as needed via route extraction
4. While loading, hide the other modules.
So how much effort does it take to build a routing module? In fact, surprisingly simple:
First, on the main page, write the corresponding code:
<ng-view></ng-view> this represents the routing area and the view area, and only the label is written to trigger the routed event:
1 <HTMLLang= "en"Ng-app= "Mytodo"><Head>2 <MetaCharSet= "Utf-8">3 <title>Angularjs TODOMVC</title>4 <Linkrel= "stylesheet"href= "Node_modules/todomvc-common/base.css">5 <Linkrel= "stylesheet"href= "Node_modules/todomvc-app-css/index.css">6 <style>7 . Pagination{8 Overflow:Hidden;9 padding:20px;Ten } One . Pagination ul Li{ A width:60px; - Height:30px; - Line-height:30px; the Border:1px solid Black; - float: Left; - List-style-type:None; - Margin-right:10px; + text-align:Center; - } + </style> A </Head> at <Body> - <Ng-view></Ng-view> <!--routing area, view area - - <FooterID= "Info"> - <P>Double-click to edit a todo</P> - <P>Created by<ahref= "Http://sindresorhus.com">Sindre Sorhus</a></P> - <P>Part of<ahref= "Http://todomvc.com">Todomvc</a></P> in </Footer> - to <Scriptsrc= "Node_modules/angular/angular.js"></Script> + <Scriptsrc= "Node_modules/angular-route/angular-route.js"></Script> - <Scriptsrc= "Js/app.js"></Script> the * $ </Body>Panax Notoginseng </HTML>
Everything else is decorated, just look at the 24th line.
In the routing area and the view area, we can add content to it--even add a Web page to go in.
Next, look at the corresponding app.js.
1 var app = Angular.module ("Mytodo", [' Ngroute ']);2 //Routing configuration:3 App. Config (function ($routeProvider) {4 var routeconfig = {5 templateurl: "body.html",6 controller: "Mytodoctrl"7 /*controller: ' Mytodoctrl ' * *8 }9 Ten var ohter_config = { One templateurl: "other.html" A } - - $routeProvider. the When ("", routeconfig). - //status: It corresponds to the hash:all of our page completed active - //The priority of routing rules is determined in the order in which they are written - When ("/other", ohter_config). + When ("/:aaa", routeconfig). - otherwise ({redirectto: "/all"}); + }); A App.controller ("Mytodoctrl", Function ($scope, $routeParams, $filter) { at Console.log ($routeParams); - -});
If you only use routing, the above code is sufficient. it will guarantee;
1. When the page stays on the homepage or other strange places, it automatically jumps to
/all
Above, the URL is--http://127.0.0.1:8020/finishangularjs-mark2/index.html#/all
Just pay attention to the back of index.
2. When the page jump direction is/other, jump to
Http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
On
3. When there is a specific jump (here is the/active,/complete/all three), will also jump to the corresponding page, but this is the index under the jump-
Http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active
Http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
Http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete
"Pay particular attention to the point: except that 2 will jump out of this page, the other jumps are displayed in the specified view area and the routing area above, the body page content will be loaded." 】
Next we explain the principle:
App. Config (function ($routeProvider)
This is the code used to set the route, just write it straight.
1 var routeconfig = {2 templateurl: "body.html",3 Controller: " Mytodoctrl "4 /*controller: ' Mytodoctrl ' */5 }6 7 var ohter_config = {8 templateurl: "other.html"9 }This is the two jump, jump is an object, Templateurl, that is, the template is body.html, which is why index.html will load body.html. The second parameter is to add a controller to the template, with the name--mytodoctrl.
The second jump because it is not important, so pass.
1 $routeProvider. 2 When ("", routeconfig). 3 //status: It corresponds to the hash:all of our page completedthe priority of the active4 //Routing rules is determined in the order in which they are written 5 when ("/other", ohter_config). 6 When ("/:aaa", routeconfig). 7 Otherwise ({redirectto: "/all"}); 8 });This piece of code is used for judgment, and when the hash value changes, the corresponding Jump object is executed.
When the hash value is "" and the second sentence is empty, execute routeconfig
When the hash value is "/other", that is, the fifth inning, execute Other_config
When the hash value is a special variable, the name of the variable is AAA, the value is x (x can be any defined meaning, here is one of the all,complete,active), namely "/active", "/complete", "/all", Execute routeconfig.
When the hash value is otherwise, the default jumps to the hash value "/all".
We get the hash, execute the following object, take out the object's template, add it to the home page, start the controller, and the entire route is done.
Route selection for Angular.js
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
