CODEWITHSUNDEEP
angularjsviewnestedangular-ui-routerstate
mkelley82
mkelley82

Reputation: 177

I am using Angular with UI-Router and can't get multiple views to work

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.

Upvotes: 1

Views: 104

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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

Upvotes: 2

Related Questions