CODEWITHSUNDEEP
angularjsangular-ui-routerangular-ui
damir
damir

Reputation: 2028

Use stateProvider views in all modules

I want to use a stateprovider view template in all modules..

so, in index.html i have this:

<div ui-view="nav"></div>
<div ui-view></div>
<div ui-view="footer"></div>

then my config is this:

$urlRouterProvider.otherwise('/');

$stateProvider.
    state("home",
    {
        url: "/",
        views: {
            "": {
                templateUrl: "main.html"
            },
            "nav": {
                templateUrl: "modules/nav/nav.html"
            },
            "footer": {
                templateUrl: "modules/footer/footer.html"
            }
        }
});

this works pretty fine for the root and default route, but if i navigate to localhost:8000/page1 for example, the nav and footer is not visible with this config:

$stateProvider.
    state("page1",
    {
        url: "/page1",
        views: {
            "": {
                templateUrl: "modules/page1/page1.html"
            }
        }
    });

when i add then the nav and footer view with template to the config, then it is working of course. But i do not want to add these same views and templateUrls to all my pages and modules.. can i define that somehow that it is valid everywhere what i defined in my main config for the default route?

or do i have to use ng-include? because with ng-include works fine, but i think it would be nicer with ui-view :)

does anyone has a solution for that?

thank you very much

Upvotes: 0

Views: 130

Answers (1)

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

Reputation: 123901

You should extenad your 'page1' state, with a parent. That parent could contain all definitions, could be shared, and other child states will just profit form it:

state("root",
{
    // this state will not use any url, it is just a wrapper
    // url: "/",
    views: {
        // place hoder for child
        "": {
            template: '<div ui-view=""></div>'
        },
        "nav": {
            templateUrl: "modules/nav/nav.html"
        },
        "footer": {
            templateUrl: "modules/footer/footer.html"
        }
    }
  ...

Now any state can use the parent (it won't affect url neither name, if we use setting parent):

state("page1",
{
    parent: "root"
    url: "/page1",
    // no need to define views, if we target the unnamed in the parent
    templateUrl: "modules/page1/page1.html"
});

So, now, "page1" state has its own url (not inherited from parent). It also has all the stuff injected into the index.html (thanks to parent root). And also, it does target the parent unnamed view...

More details:

Similar question with a working plunker:

Upvotes: 1

Related Questions