Angular using Ui-router to design Web pages

article Songyang

This article is from the Asura road , prohibited for commercial purposes, reproduced please indicate the source.  

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

/span>

/p>

What is this?

Ui-router is a routing solution for a Web client. I think its biggest role is to block the design of the Web interface.

Chunked layering

The initial Web Access model is this: we visit Page1 and then visit Page2 .... In the new model it becomes this way: the access effect is the same, but the design has changed. It becomes: There is only one page, there are different areas in the page, each area can be erased. Think about it, it seems quite common, and I don't know if it's the same with other technologies.

Code implementation

The principle is finished and then a brief introduction to the realization of it

1. Download the JS file and introduce index.html it to the file.
2. In HTML, add the injection location: <div ui-view=""> . It is the position that is filled when the injection is triggered.
3. In HTML, add a trigger: <ANY ui-sref="XXX"> . XXX is $state, which follows the XXX.XXX tree structure and renders from the root node when rendered.
4. In App.js, configure the routing function.config(function($stateProvider, $urlRouterProvider) {});

To elaborate:

Introducing Code

Nothing to elaborate, to say is the path do not write wrong it.

Injection position

For the structure of multiple columns, you can use multiple view implementations, which in turn specify the template for a sub- [email protected] view of this state in the declaration used in config, for example:

In Js$stateprovider    . State (' index ', {        URL: '/index ', views        : {            ': {                templateurl: ' tpls/ Index.html '            ,            ' [email protected] ': {                templateurl: ' tpls/form1.html '            },             ' [email protected] ': {                Templateurl: ' tpls/form2.html '}}    )    //in html     <div class= "container" >    < Div ui-view= "main1" ></div>    <div ui-view= "Main2" ></div></div>   

This code fills the form1.html and form2.html into the corresponding view.

Add Trigger

If ui-sref="xxx" it is added to the label, it is not visible when the state is not activated. Specific description can be seen Xia Guan Net. Usually we are active, but sometimes we always want to control ourselves. can refer to:

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

When user is Fansy, the following line is displayed. This example is official, I am useless to understand this function, back in the study bar.

Configuring routing is First $urlRouterProvider

It is typically used to configure non- $state additional routes. For example:

$urlRouterProvider. When ("", "/Home");

Sets the default page to the URL of/home. Note Oh, here is the URL, do not write the wrong state.

Of course, you can also write a redirect for any additional pages:

$urlRouterProvider. Otherwise ("Home");

So to visit other puppy pages, they all went to home.

And then the $stateProvider.

The trigger point is hierarchical, and its compliance with the routing rules can be found on this page from the official website. The $state.go function can force the state position to switch, we can write the following JS code in any place:

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

Alternatively, you can configure the controller in the corresponding state in the $stateprovider, and when the state is activated, the corresponding function is called, for example:

$stateProvider. State ("Home", {URL: "/", Templateurl: "tmpls/home.html", Controller:function ($scope, $state) { Console.log ("Enter Home");})

Each time the status changes to home, a log is output.

Finally, the rendering is hierarchically based. Therefore, changing the sibling node does not render the parent node again. And will not be re-rendered without changing the state. For example, always press the same button, it will not be re-rendered; no change with node, click a "Refresh" button, will not refresh the entire page.

At last

Other details can look at its homepage, there is another good article also worth borrowing from.

If you think this article is helpful to you, you can take a Top , not only do not want to be a father, but also let more people can see it ...

Angular using Ui-router to design Web pages