simple ui-routes, explanation please [closed]

I came to know that ui-roues are much powerful and advantageous than ngRoutes, recently. So I satrted studiing the ui-routing feature from . BUt could not undersatnd withh the examples they have given especially from "Multiple named views" in, 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.



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

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'
      '[email protected]' : { templateUrl: '',},
      '[email protected]' : { templateUrl: 'tpl.left.html',},
      '[email protected]' : { templateUrl: 'tpl.main.html',},

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

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

  <section class="middle">

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

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


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:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of [email protected], 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: '[email protected]' : { templateUrl: '',}, says:

  • inject template into the view named top
  • search for that name inside of a state named index
  • these information together: top + index == '[email protected]' view name

Observe the plunker - to see that 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:

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...


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.