The route selection method of Angular.js _angularjs

In a single page, we can add multiple modules so that the 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 about it 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 kinds of goods, each product has different forms of presentation (they have their own separate CSS and JS), then in general, we need to prepare 1000 pages to load this information. However, with this modular thinking, we can simply set up 1000 different modules in the background, and then load the corresponding module of the desired product onto the only page as needed.

To do the functions described above, you must use the routing function.

Main idea:

1. Set up a number of independent modules in the background

2. Establish a Routing control module

3. Require a module to be loaded on the home page as needed

4. While loading, the other modules are hidden.

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 view area, which triggers routed events only if this tag is written:

Everything else is decorated, just look at line 24th.

In the routing area and view area, we can add content to it--and even add a page to it.

Next, look at the corresponding app.js.

var app = Angular.module ("Mytodo", [' Ngroute ']);
Configuration of routing:
app.config (function ($routeProvider) {
 var routeconfig = {
    templateurl: ' body.html ',
    Controller: "Mytodoctrl"
    /*controller: ' Mytodoctrl '/
  }

  var ohter_config = {
    Templateurl: " Other.html "
  }

  $routeProvider.
   When ("", routeconfig).
   Status: It corresponds to the Hash:all completed active
   //Routing rules of our page, as determined by the order in which they are written
   ("/other", ohter_config).
   When ("/:aaa", routeconfig).
   Otherwise ({redirectto: "/all"});
});
App.controller ("Mytodoctrl", Function ($scope, $routeParams, $filter) {
    console.log ($routeParams);
  
});

If you use routing alone, the above code will suffice. it will guarantee;

1. When the page stays on the homepage or other strange place 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 the index.

2. When the page jump direction is/other, jump to

Http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
On
3. When a specific jump occurs (here is the jump is/active,/complete/all three), will also jump to the corresponding page, but this is the jump under the index-

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

"The Special note: In addition to 2 will jump out of this page, other jumps are displayed in the specified view area and the routing area above, the body page content will be loaded over." 】

Next we explain the principle:

App.config (function ($routeProvider)

This is the code used to set the route, just write it.

var routeconfig = {
    Templateurl: "body.html",
    Controller: "Mytodoctrl"
    /*controller: ' Mytodoctrl ' *

  var ohter_config = {
    Templateurl: "Other.html"
  }

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 reason. The second parameter is to add a controller for this template, the name is--mytodoctrl.

The second jump is not important so pass.

$routeProvider.
   When ("", routeconfig).
   Status: It corresponds to the Hash:all completed active
   //Routing rules of our page, as determined by the order in which they are written
   ("/other", ohter_config).
   When ("/:aaa", routeconfig).
   Otherwise ({redirectto: "/all"});
});

This piece of code is used to make judgments, and when the hash value changes, the corresponding Jump object is executed.

Executes the routeconfig when the hash value is the second sentence, which is empty

When the hash value is "/other", that is, the fifth inning, the execution other_config

When the hash value is a special variable, the name of the variable is AAA, and the value x (x can be defined as any point, here is one of the all,complete,active), namely "/active", "/complete", "/all" when, Perform routeconfig.

When the hash value is otherwise, the default jumps to the hash value of "/all".

We got the hash value, executed the following object, took out the object's template, added it to the homepage, started the controller, and the entire route was completed.

The above is a small series for everyone to bring the route of the choice of the entire content of the angular.js, I hope to help you, a lot of support cloud Habitat Community ~