0

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

damir
  • 1,928
  • 1
  • 16
  • 26

1 Answers1

1

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:

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • That was quick. Thank you very much – damir Feb 12 '15 at 10:34
  • Great to see that ;) Enjoy amazing UI-Router ;) – Radim Köhler Feb 12 '15 at 10:35
  • thanks, will have it hopefully:) may i ask you one more thing.. i can also define the controller in the state, but also in the html as ng-controller, what is your thought about it? would you keep it in the html file or move it to the state defintion? – damir Feb 12 '15 at 10:39
  • 1
    ng-controller should not be used with the ui-router states. It won't make any good. The UI-Router way (**the way**) is to define controllers per states. It could work both ways... but defining stuff in states is ready for more features, e.g. AOP... – Radim Köhler Feb 12 '15 at 10:40