Angularjs a way to implement deep routing based on Ui-route "Routing nesting" _angularjs

This article illustrates the ANGULARJS approach to implement deep routing based on Ui-route. Share to everyone for your reference, specific as follows:

1. In front of us through a simple ng-route to achieve a simple level of routing, for the deep route, we can achieve through Ui-route.

(1) Limitations of Ng-route: One page Cannot nest multiple views, that is, a page can only have one controller switch for a page.
(2) Ui-route improvement: In a single page application with rich clients, to render a different view on a page, we can implement the nesting of routes through Ui-route.

2. How to use Ui-route

(1) First load Angular-ui-route.js

 <script src= "Js/angular-ui-router.js" ></script>

(2) Set HTML page, this is different from the Ng-view in Ng-route

<ul>
  <li><a ui-sref= "index" > Home </a></li>
  <li><a ui-sref= "Fruit" > Fruit </a></li>
  <li><a ui-sref= "vegetable" > Vegetables </a></li>
 </ul>

(3) Configure routing in JS

(because Chorme does not support local file access, and FF support, here do not want to build a local server, you can use Firefox browser debugging)

The code for configuring the route is as follows:

Angular.module (' MyApp ', [' Ui.router '])
. config (function ($stateProvider, $urlRouterProvider) {
  $ Urlrouterprovider.otherwise ('/index ');
  $stateProvider. State (' fruit ', {
    URL: '/fruit ',
    templateurl: ' fruit.html '
  })
  . State (' vegetable ', {
    URL: '/vegetable ',
    templateurl: ' vegetable.html '
  }
  . State (' index ', {
    URL: '/index '
    , Template: '  
 

Because here we place index.html and fruit.html and vegetable.html in
In the same directory, the path under template suggests using an absolute path.

The effect is as follows when the initial default interface is:

Click on the fruit and switch to the fruit page:

Click on the vegetables and switch to the vegetable page:

This article introduces the basic usage of the Ui-route page, which is generally consistent with the functionality of the Ng-route implementation, and here we look at the basic meaning of each configuration attribute:

I) Template/templateurl

Template: template content in string mode, or a function that returns HTML
Templateurl: template path or function that returns the template path
Templateprovider: Functions that return HTML content

For example: In our example, we write

 . State (' vegetable ', {
    URL: '/vegetable ',
    templateurl: ' vegetable.html '
  })
  . State (' index ', {
    URL: '/index ',
    Template: '  
 

II). Controller

Controller, returns the controller name of the corresponding URL template, or the controller function of the corresponding URL template. If there is no corresponding template definition, the Controller object will not be created

III). Resolve

With the Resolve feature, we can prepare a set of dependent objects to inject into the controller. In Ngroute, resolve can be resolved before the actual rendering Promise,resolve option provides an object in which the key is the dependent name to be injected into the controller, and the value is the factory where the object is created.

3. Implement deep-level routing nesting through Ui-route

We added new HTML to the fruit page:

 <ul>
  <li><a ui-sref= "Fruit.orange" > Orange </a></li>
  <li><a ui-sref= " Fruit.apple "> Apple </a></li>
  <li><a ui-sref=" Fruit.banana "> Banana </a></li>
 </ul>
 <div ui-view></div>

We found a two-level navigation bar (one more ui-view) under the navigation bar.

Reconfigure JS routing, in the first level of routing fruit further nesting, JS code
As follows:

$stateProvider. State (' fruit ', {
    URL: '/fruit ',
    templateurl: ' fruit.html '
})
. State (' vegetable ', {
    URL: '/vegetable ',
    templateurl: ' vegetable.html '
}
. State (' index ', {
    URL: '/index '
    , Template: '  
 

Finally we look at the effect: now click on the fruit after the first switch page is displayed as:

Click on the orange, Apple or banana to choose, the effect is that the two-level switch page effect is:

4. In addition Ui-route can also achieve multiple view routing, this function under the same state, the entire page is divided into several small pages to display different values.

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.