1

I have the following code:

 app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/map');
    $locationProvider.html5Mode(true);

    $stateProvider
        .state('map', {
            url: '/map',
            templateUrl: 'Views/templates/layout.html'

        })
        .state('map.controls', {
            url: '',
            views: {
                'ddldistricts': {
                    templateUrl: 'Views/templates/ddl.districts.html',
                    controller: 'DistrictsListController'
                },
                'ddldistributors': {
                    templateUrl: 'Views/templates/ddl.distributors.html',
                    controller: 'DistributorsListController'
                },
                'ddlmanufacturers': {
                    templateUrl: 'Views/templates/ddl.manufacturers.html',
                    controller: 'ManufacturersListController'
                }
            }
        });
    }]);

The layout.html looks like this:

<h1>Controls</h1>
<div class="row">
<div class="col-md-3">
    <div ui-view="ddldistricts"></div>
</div>
<div class="col-md-3">
    <div ui-view="ddldistributors"></div>
</div>
<div class="col-md-3">
    <div ui-view="ddlmanufacturers"></div>
</div>

The layout template is being displayed but none of other views are... what am I doing wrong?

I know it is something simple but for some reason I can't figure it out.

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
mkelley82
  • 177
  • 1
  • 13
  • Check the console? Any errors about not being able to find any of the html templates? Also, try moving the otherwise down to the bottom of the code. Let me know if that helps any. – user2263572 Oct 24 '15 at 02:00
  • try changing `url: '',` to `url: '/',` – Reactgular Oct 24 '15 at 02:04
  • No errors in console. I can see in Devtools->Network tab where layout.html is retrieved, but there is no attempt made for any of the templates defined in the map.controls state. Changing url: '' to '/' has no effect. – mkelley82 Oct 24 '15 at 04:06
  • Also no change by moving $urlRouterProvider.otherwise('/map'); to the bottom of app.config(). – mkelley82 Oct 24 '15 at 04:10

1 Answers1

2

There is a working plunker

In case that we wanto a child to be default (instead of its parent) we have mark parent as abstract: true

.state('map', {
    url: '/map',
    abstract: true,
    ...
})

Then will the child with empty url used as a default redirection:

.state('map.controls', {
    url: '',
    ...

Check it here

BUT in case, we do not want to use abstract state, we'd like to a bit smarter solution - there is one I do like the most:

Redirect a state to default substate with UI-Router in AngularJS

Also, the link to doc (describing the abstract: true solution)

How to: Set up a default/index child state

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks! I also found another solution in the first answer on this question: http://stackoverflow.com/questions/22175980/angular-ui-router-multiple-views?rq=1 What is the difference between your solution and the one outlined in the above question/answer? – mkelley82 Oct 24 '15 at 05:37
  • Both are in fact similiar. Yours uses two states, the other just one. But at the end ti works the same. Just with more states, you can use one as a root also for other "state families". But... play with and the more you will use it, the more you will understand what suites to you... good luck with UI-Router – Radim Köhler Oct 24 '15 at 05:39
  • Thanks I really appreciate the help! – mkelley82 Oct 24 '15 at 05:48