Angular uses ui-router to design web pages, angularui-router

Angular uses ui-router to design web pages, angularui-router

Author: Songyang

This article is from Ashura road and is prohibited for commercial purposes. For more information, see the source.

Link: http://blog.csdn.net/fansongy/article/details/44162685

What is this?

Ui-router is a web Client routing solution. I think its biggest role is to break down the web interface design.

Segmented and layered

The original web access model is as follows:

We access page1, and then access page2 ....

In the new model, it becomes like this:

The access effect is the same, but the design has changed. It becomes: there is only one page, and there are different areas in the page, each area can be erased. It seems quite common to think about it. I don't know if other technologies are the same.

Code Implementation

Let's briefly describe how it works.

1. Download the js file and introduce itindex.htmlFile.
2. In html, add the injection location:<div ui-view="">. It is the position where the injection is triggered.
3. In html, add a trigger:<ANY ui-sref="XXX">. XXX is $ state, which follows the tree structure of xxx. xxx and starts rendering from the root node during rendering.
4. In app. js, configure the routing function.config(function($stateProvider, $urlRouterProvider) {});

Let's take a closer look:

Introduce code

I have nothing to elaborate on, but do not make any mistakes in the path.

Injection Location

For the structure of multiple sub-columns, you can use the implementation of multiple views, and then usebbb@AAAThe declaration specifies the template corresponding to the state neutron view, for example:

//in js$stateProvider    .state('index', {        url: '/index',        views: {            '': {                templateUrl: 'tpls/index.html'            },            'main1@index': {                templateUrl: 'tpls/form1.html'            },             'main2@index': {                templateUrl: 'tpls/form2.html'            }        }    })    //in html     <div class="container">    <div ui-view="main1"></div>    <div ui-view="main2"></div></div>   

In this Code, form1.html and form2.html are filled in the corresponding view.

Add trigger

If you addui-sref="xxx"It is not visible when it is not activated. For details, refer to the official website. We usually use the activation status, but sometimes we always want to control it by ourselves. Refer:

<ul>  <li ui-sref-active="active" class="item">    <a href ui-sref="app.user({user: 'fansy'})">@fansy</a>  </li></ul>

When the user is fansy, the line following is displayed. This is an official example. I didn't understand this function. I will study it later.

First $urlRouterProvider

It is usually used to configure non-$stateFor example:

$urlRouterProvider.when("","/home");

Set the hosts page to/home URL. Note: The URL is used here. Do not write it into state by mistake.

Of course, you can also write the orientation of any additional page:

$urlRouterProvider.otherwise("/home");

In this way, the pages of other cats and dogs will all go to/home.

Then $ stateProvider

The triggering point is hierarchical. The routing rules it complies with can be found on the official website. Pass$state.goThe function can forcibly switch the status position. We can write the following js Code at any location:

$state.go('home.state1');

In addition, you can configure controller in the corresponding state in $ stateProvider. When this state is activated, the corresponding function will be called. For example:

$stateProvider.state("home",{url:"/home",templateUrl:"tmpls/home.html",controller:function($scope,$state) {console.log("enter home");}})

When the status changes to home, a log is output.

Finally, the rendering is hierarchical. Therefore, changing the peer node does not render the parent node again. And the rendering will not be re-rendered without changing the status. For example, if you keep pressing the same button, it will not be re-rendered. If you do not change the node and click a "refresh" button, it will not refresh the entire page.

Last

For other details, you can refer to its home page. There is also a good article worth learning.

If you think this article is helpful to you, you can stick to it, not only won't like it, but also let more people see it...