"Angularjs" "Learning experience" Routing basics

Original: http://www.imooc.com/wenda/detail/236998

Angularjs comes with a routing module Ngroute, but experienced teachers recommend that we use more sophisticated and powerful ui-router for routing. So what exactly is a route? My own understanding is that routing can be thought of as a total controller, which populates the content of the page based on the different states of the page, which is the primary use of routing. Front-end routing can significantly reduce the number of requests to server resources, so routing at the front end is especially important.

-----------------------------------------------------------------

Since routing is controlling the display state of the entire application, we have to make way for the module to take over the entire application at the first time.

Using Ui-router is simple, download its package, introduce JS file in index.html, and then introduce it in the dependency of the module.

var routerApp = angular.module(‘routerApp‘, [‘ui.router‘]);

The essence of Ui-router is actually a portion of the template reserved for us, it will be in the page to find ui-view this instruction, and then according to the current page state to fill the corresponding template into the Ui-view block.

For example, a typical page is nav+footer fixed, the middle of the main part as the content display area is often changed. The corresponding page structure is

<body>        <nav>This is nav</nav>        <divui-view></div>        <footer>This is footer</footer>    </body>

Then our route based on the state of the page, choose a different HTML template to populate the Ui-view div inside.

How to use Ui-router in JS?

routerApp.config(function($stateProvider,$urlRouterProvider) {        $urlRouterProvider.otherwise(‘/index‘);        $stateProvider               .state(‘index‘,{                       url           : ‘/index‘,                       templateUrl    : ‘tpls/index.html‘               })               .state(‘list‘,{                       url           : ‘/list‘,                       templateUrl     : ‘tpls/list.html‘               })               .state(‘detail‘,{                       url           : ‘/detail‘,                       templateUrl     : ‘tpls/detail.html‘               });});

These are the most basic templates for angular routing. Note, however, that the first parameter of state is not a matching rule, but rather a status name, which means that the parameter can actually be arbitrary, it is used to add a name to the current state, to trigger the routing rule, or to see the contents of the URL. Like this.

.state(‘home‘,{        url         : ‘/index‘,        templateUrl : ‘tpls/index.html‘    })

We have to enter Www.xx.com/index in the address bar to load the corresponding template instead of entering home, which is just a name.

But the name has its role, too. See an example to understand.

    index.html

< Code class= "HTML Spaces" >&NBSP;&NBSP;&NBSP;&NBSP; < nav >this is the nav</ nav > &NBSP;&NBSP;&NBSP;&NBSP; < div  ui-view></ div > &NBSP;&NBSP;&NBSP;&NBSP; < footer >this is the footer</ footer >

    list.html

&NBSP;&NBSP;&NBSP;&NBSP; div > < p >this is the list page</ p > &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; < div  ui-view></ div > &NBSP;&NBSP;&NBSP;&NBSP; </ div >

List-main.html

<div>               <p>This is list-main Page</p>        </div>

If our route is written like this,

.state(‘aaa‘,{                       url           : ‘/list‘,                       templateUrl : ‘tpls/list.html‘               })               .state(‘bbb‘,{                       url           : ‘/list/main‘,                       templateUrl : ‘tpls/list-main.html‘               })

When we enter Www.xx.com/list/main in the browser, the page result is

If our route is written like this,

.state(‘aaa‘,{                       url            : ‘/list‘,                       templateUrl : ‘tpls/list.html‘               })               .state(‘aaa.bbb‘,{                       url            : ‘/main‘,                       templateUrl : ‘tpls/list-main.html‘               })

So when I enter Www.xx.com/list/main, the page results are

That is, the first parameter of state defines a name for the page, and the template for the page can only be placed in the ui-view of its parent. If this is not the case, then the default parent is index.html, so the first form of the BBB template's parent is index.html, so the input/list/main will load the corresponding template into Ui-view in index.html. And the second way of writing aaa.bbb, this means that BBB's parent is AAA, so the BBB template to be placed in the AAA template (that is, list.html) in the Ui-view. The URL at this point is the URL after the AAA page's URL.

Of course, there are pages of nesting, this part of the desert teacher in fact has been very clear in the video.

This is a scoping issue that requires attention in routing.

-----------------------------------------------------------------------

Of course there are many other problems with routing, because routing is a very important part of ANGULARJS, but the basic usage is the above, if all the static pages are written, then use the above content can already make a beautiful web. Now that we have learned the basic usage of routing, we have a solution to the other problem.

"Angularjs" "Learning experience" Routing basics