Different headers based on current route using ui-router and AngularJS

Question

Using AngularJS and ui-router. I need to load a different header based on the current state (the user is logged or not).

<div ui-view="header"></div>
<div ui-view="container"></div>

Here are some of the states I'm having:

root - everything is based on it
root.protected - have some special resolve statements to access protected pages when the user is logged
root.protected.home - a protected page
root.login - an unprotected login page

How can I define different header (view + controller) based on the state?

There should be one header the user tries to access root.login, and different one accessing root.protected.home.

alisabzevari · Accepted Answer · 2015-07-28 13:42:53Z

2

You can define two templates: one for "protected" and one for "login":

    $stateProvider
        .state("root", {
            abstract: true,
            template: "<ui-view/>"
        })
        .state("root.protected", {
            abstract: true,
            template: '<div ui-view="header"></div><div ui-view="container"></div>'
        })
        .state("root.protected.home", {
            url: "/home",
            views: {
                header: { templateUrl: "/home-header.html" },
                container: { templateUrl: "/home-container.html" }
            }
        })
        .state("root.login", {
            url: "/login",
            templateUrl: "/login.html",
            controller: "loginController"
        });

You can write whole login html code in login.html. The better solution is to have a state named "unprotected" and define two ui-view for it:

        .state("root.unprotected", {
            abstract: true,
            template: '<div ui-view="header"></div><div ui-view="container"></div>'
        })
        .state("root.unprotected.login", {
            url: "/login",
            views: {
                header: { templateUrl: "/login-header.html", controller: "loginHeaderController" },
                container: { templateUrl: "/login-container.html", controller: "loginContainerController" }
            }
        });

And also a more better solution is to not define a ui-view for header part of unprotected and have only one ui-view for its container. With this approach you don't need to define header for every unprotected view (if you have any). So you just need to write container template.

edited Jul 28, 2015 at 13:42

answered Jul 28, 2015 at 13:35

alisabzevari

8,1668 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

van Over a year ago

Thank you for your response. While I wanted to use the same base template, for both root and root.protected it helped me to solve the issue realizing I have to replace the header view at root.protected state. $stateProvider.state("root.protected", { abstract: true, views: { 'header@': { templateUrl: emisConfig.baseDir + "/views/partials/header-protected.html", } },

Collectives™ on Stack Overflow

Different headers based on current route using ui-router and AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related