simple ui-routes, explanation please [closed]

Question

I came to know that ui-roues are much powerful and advantageous than ngRoutes, recently. So I satrted studiing the ui-routing feature from http://www.ng-newsletter.com/posts/angular-ui-router.html . BUt could not undersatnd withh the examples they have given especially from "Multiple named views" in http://jsfiddle.net/jwebe0pe/9vH9Z/, as they have given the explanation using d3.js, which I do not know.

1. I request here you guys, to give me a simple jsfiddle explantion, about how to implement Multiple view ui-route

2. What is the importance of

$stateProvider.state('admin', {
        abstract: true,
        url: '/admin',
        template: '<div ui-view></div>'
      }).state('admin.index', {
        url: '/index',
        template: 'Admin index'
      }).state('admin.users', {
        url: '/users',
        template: '<ul>...</ul>'
      });

admin, admin.index and admin.users, in the code above and when will be used.

3 Could not able to understand the abstract: true/false concept.

Please clarify me in the above points.

Hope you guys help me.

Answer 1

The best you could do is to go through all the links mentioned in this Q&A:

• example app by ui-router team
• source code of that example
• and essential state.js definition, one of the best documented codes ever
• plus the wiki

Here I created another example with some master layout introducing TOP, LEFT, MAIN areas as separted multi-views.

That Layout state would be defined as this:

.state('index', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

the core template injected into index.html element <div ui-view></div>:

<div>
  <section class="top">
    <div ui-view="top"></div> // TOP here
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div> // LEFT here
    </section>

    <section class="main">
      <div ui-view="main"></div> // MAIN here
    </section>

  </section>
</div>

So we can see, that one state ('index' above) has one master view (layout) and also other views, injected into that layout template, using the absolute view naming:

• View Names - Relative vs. Absolute Names (cite:)

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

I.e. the part of state definition: 'top@index' : { templateUrl: 'tpl.top.html',}, says:

• inject tpl.top.html template into the view named top
• search for that name inside of a state named index
• these information together: top + index == 'top@index' view name

Observe the plunker - to see that in action...in very simplified example....

EXTEND: to give some more explanation to the extended question

What is abstract state? I.e state marked as abstract: true...

Like in any other languague (C#, Java) it is a standard state, which cannot be instantiated, reached directly. It is always a parent state, intended to handle some basic functionality. Namely:

• views do profit from Scope Inheritance by View Hierarchy Only:

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

so, the parent controller can be provided with some resolver settings, it can handle authorization, it can load data... Simply, as a parent, it can do lot of common stuff for children, while it cannot be reached directly

• it also can make templating easier. because it the abstract parent would containt e.g. template.layout... children can use realtive view naming.

So, abstract is a feature. Feature very similar to standard inehritance...