State with A Different Master View Page in AngularJS

Question

I made a big mistake and designed the whole master page and its pages inside a view without a nested structure in my single page angular application. And now, I need a login page with a totally different structure and it's a bit time consuming to change the templates and add a root page.

I'm looking for a way to navigate (or redirect) to my login page but I want my login page template to fit the whole page instead of fitting inside the ui-view.

Is this possible?

<p>I don't want this paragraph in my login</p>
<div ui-view></div>

    var loginState =
        {
        name: 'login',
        url: "/login",
        // root: ? there should be no root for this
        templateUrl: 'app/access/login.html', 

        controller: 'LoginPageController',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'App',
                    files: [
                        "app/LoginPageController.js"
                    ]
                }]);
            }]
        }
    }

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function ($stateProvider, $routeProvider, $locationProvider) {

        $routeProvider.otherwise("/dashboard");

        $stateProvider.state(dashboardState).state(testState)
            .state(loginState)

score 5 · Answer 1 · edited May 23 '17 at 11:45

I would like to share the approach I used.

Honestly my case was a bit easier, because I already have only few different roots (and their hierarchies). But even if you would have to do that at many places, you can gain a lot later.

There is a working plunker

So, the trick is to introduce some super state:

.state('root', {
    abstract: true,
    templateUrl: 'tpl.layout.html',
})

and the content of the <body> is moved to the tpl.layout.html.

the Index.html:

  <body>
    <div ui-view=""></div>
  </body>

The tpl.layout.html:

<p>I don't want this paragraph in my login</p>

<ul>
      <li><a href="#/home">home</a>
      <li><a ui-sref="parent">parent</a>
      <li><a ui-sref="parent.child">parent.child</a>
      <li><a href="#/login">login</a> special layout page
</ul>

<div ui-view="">
  The target for any child of the "root" state
</div>

And finally the adjustment of all states - we have to extend each current/existing root state with just one setting: parent: "root",

.state('home', {
     parent: "root",
     ... // existing state setting
})
.state('parent', {
     parent: "root",
     ... // existing state setting
})
...

While any special state, e.g. login could start from the scratch

.state('login', { 
    url: "/login",
    template: '<div>different login <a href="#/home">home</a></div>',
})

Check it in action here

And what we can gain later? Well, now we do have a state, which is triggered almost always (except of login in our case). So we can place some resolve at this single place, and be sure, that each state can have

Check this Q & A (or this Updating resolved objects in ui.router parent states with an example) for example:

.state('root', {
    abstract: true,
    template: '<div ui-view></div>',
    resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
    controller: 'rootController',
})

State with A Different Master View Page in AngularJS

1 Answers1