How can set nested routed with Angularjs loading a view that contains others view inside?

Question

As I wrote in title, I can't understand how to use nested view. I'm trying to use UI-Router.

Say for example I've the following html:

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

I wish to inject two different templates for "viewA" and "viewB"

JS routes:

function configB($urlRouterProvider, $stateProvider){

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state("/",{
           url: "/",
           templateUrl : "/testingBlock.htm",
           controllerAs : "MainCTRL as ctrl"
        })
        .state("login",{
            url: "/login",
            templateUrl : "/app/templates/login.htm",
            controllerAs : "MainCTRL as ctrl"
        })
        .state("multi",{
            url: "/multi",
            templateUrl : "/app/templates/multipleView.htm",
            controllerAs : "MainCTRL as ctrl"
        });

}

HTML for "/app/templates/multipleView.htm":

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

what is your routing setting ? addit please and add your corresponding HTML — aorfevre, Jun 02 '15 at 16:35
Here, take a look http://stackoverflow.com/a/25372142/1061668 — Mikko Viitala, Jun 02 '15 at 16:44
@MikkoViitala how can that help me? How can I make a STATE point to a named view? Where are in that link nested views? — Donovant, Jun 02 '15 at 16:48
Look at the plunker link in the post, same as here http://plnkr.co/edit/XIW4ZE — Mikko Viitala, Jun 02 '15 at 16:51
I can see nothing useful, sorry. Can you clearly tell me what should I do? — Donovant, Jun 02 '15 at 16:58

score 1 · Accepted Answer · answered Jun 02 '15 at 16:58

There is a working plunker. States defintion would be like this

// parent       
.state("multi", {
  url: "/multi",
  views: { 
    '': {
      templateUrl: "app/templates/multipleView.htm",
      controllerAs: "MainCTRL as ctrl",
    },
    'viewA@multi': {
      template: "multi parent content",
    },
    'viewB@multi': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }
})
// child
.state("multi.child", {
  url: "/child",
  views: { 
    'viewA': {
      template: "multi child content",
    },
    'viewB': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }
});

The parent contains the unnamed view '' with a template: 'app/templates/multipleView.htm', which contains our targets

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

And also, that parent state "multi" fills these targets with other views using absolute naming:

    'viewA@multi': {
      template: "multi parent content",
    },
    'viewB@multi': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },

Child state then just injects into these two parent targets, using relative names

views: { 
    'viewA': {
      template: "multi child content",
    },
    'viewB': {
      templateUrl: "testingBlock.htm",
      controllerAs: "MainCTRL as ctrl",
    },
  }

How can set nested routed with Angularjs loading a view that contains others view inside?

1 Answers1