angularjs - ui-router - can we preload nested state?

Question

I have this in my app.js:

$stateProvider
    .state('actionplans', {
      url: "/actionplans",
      templateUrl: "pages/actionplans.html",
      //controller : 'ActionplansCtrl'
    })
    .state('actionplans.planning', {
      url: "/planning",
      templateUrl: "pages/actionplans.planning.html",
      //controller : 'ActionplansCtrl'
    })
    .state('actionplans.summary', {
      url: "/summary",
      templateUrl: "pages/actionplans.summary.html",
      //controller : 'ActionplansCtrl'
    })

How can I default load nest view action 'actionplans.summary.html' when called actionplans.html?

You should define view parameter in actionplans. Then whenever you call actionplans you will get includet views. Here link http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view — Errorpro, Nov 04 '15 at 06:25
You need to be more specific about what you want. What do you mean by preload? Cache? Default to `actionplans.summary`? Load one template in the other? — Matt Way, Nov 04 '15 at 06:31
@MattWay Default load nest view `action plans.summary.html` when called `actionplans.html`. — sooon, Nov 04 '15 at 06:33
I'm still unsure as to what you mean. What does when called `actionplans.html` mean? Do you mean when you go to url: `/actionplans` you want to actually load `/actionplans/summary`? — Matt Way, Nov 04 '15 at 06:49

score 1 · Answer 1 · edited May 23 '17 at 11:46

There is a working example

The way which will

load some view inside of a parent - and stay on parent
allow child change it when navigating to child

is called Multiple named views:

.state('actionplans', {
  url: "/actionplans",
  views: {
    '': {
      templateUrl: "pages/actionplans.html",
      //controller : 'ActionplansCtrl'
    },
    '@actionplans': {
      templateUrl: "pages/actionplans.summary.html",
      //controller : 'ActionplansCtrl'  
    }
  }
})
.state('actionplans.planning', {
  url: "/planning",
  templateUrl: "pages/actionplans.planning.html",
  //controller : 'ActionplansCtrl'
})
.state('actionplans.summary', {
  url: "/summary",
  templateUrl: "pages/actionplans.summary.html",
  //controller : 'ActionplansCtrl'
})

What we did above, is that we used views : {} object to define two views. First is targeting the index.html (the '') the second is targeting this state view target for children ( the '@actionplans').

  views: {
    '': { // index.html      
      ...    
    },
    '@actionplans': { // this targets the unnamed view for children

Read more about absolute names here

Another way, is to define some default redirection, but that will disable parent state as a real target (e.g. here Redirect a state to default substate with UI-Router in AngularJS)

score 0 · Answer 2 · answered Nov 04 '15 at 08:14

0

Here discuss about AngularJS Routing Using UI-Router, you will get enough idea about nested view and multiple view.

https://scotch.io/tutorials/angular-routing-using-ui-router

answered Nov 04 '15 at 08:14

score 0 · Answer 3 · answered Nov 06 '15 at 00:28

I found a simple solution here.

 $urlRouterProvider.when('/actionplans', '/actionplans/summary');//<-- Add in this line
    $stateProvider
    .state('actionplans', {
      url: "/actionplans",
      abstract: true,/// <-- Add in this line
      templateUrl: "pages/actionplans.html",
    })
    .state('actionplans.planning', {
      url: "/planning",
      templateUrl: "pages/actionplans.planning.html",
    })
    .state('actionplans.summary', {
      url: "/summary",
      templateUrl: "pages/actionplans.summary.html",
    })

This will load nest view actionplans.summary.html by default when you call /actionplans. My apology that I did not make this clearer in my question so I post the answer here hopefully it will help someone else with the similar scenario.

angularjs - ui-router - can we preload nested state?

3 Answers3