CODEWITHSUNDEEP
angularjsangular-ui-router
Rifat
Rifat

Reputation: 7728

Split angular ui-router named views into modules

I have the following state defined in my app module.

$stateProvider .state('app', { abstract: true, url: '/', views: { 'header': { templateUrl: 'header.tpl.html' }, 'content': { template: 'Content goes here' }, 'footer': { templateUrl: 'footer.tpl.html' } } });

But, I want to put header and footer in separate angular modules and load them as module dependency. Like - app.header & app.footer

Since, I can not redeclare a state. And, two states with same url doesn't work. So, is there any way I can achieve this?

Upvotes: 0

Views: 510

Answers (1)

superjos
superjos

Reputation: 12695

Probably this is a bit old, but I guess answering might be useful as a future ref.
Have a look at this issue on ui-router GitHub, it seems to me that it could help.

The gist of the thing is represented by the following 2 code blocks:

// File1.js
angular.module('myApp').config(function($stateProvider) {
    $stateProvider
        .state("toplevelfeature", {
            url: '/topleavelFeature'...
        })
        .state("toplevelfeature2", {
            url: '/topleavelFeature2'...
        })
        .state("toplevelfeature.midfeature", {
            url: '/midFeature'...
        })
        .state("toplevelfeature.midfeature2", {
            url: '/midFeature2...'
        })
        .state("toplevelfeature.midfeature.anothernestedfeature", {
            url: '/anothernestedfeature...'
        })
});

// File2.js
angular.module('myApp').config(function($stateProvider) {
    $stateProvider
        .state("toplevelfeature.midfeature.anothernestedfeature.home", {...
        })
        .state("toplevelfeature.midfeature.anothernestedfeature.detail", {...
        })
        .state("toplevelfeature.midfeature.anothernestedfeature.other", {...
        })
});

Upvotes: 1

Related Questions