Angular layout guidelines

Question

I have an admin control panel application called dashboard.html initiated by its own angular module. This application has a consistent layout with n title bar in the top, left navigation bar, etc. When the route changes, the contents of the content container are updated, and the rest of the layout remains unchanged.

My problem is that the login page with a completely different layout without headers and navigation.

I am currently solving this problem by creating a login.html file with my own module, when the user logs in successfully, I redirect them to the dashboard.html application.

Is this a general approach, or is there an easy way to do this in one application by simply changing the routes, rather than redirecting them to different applications?

Answer 1

You can use angular UIrouter for this.

look at this script, http://jsfiddle.net/thardy/eD3MU/ .

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



angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '/test',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1@test': {
                        template: "Im View1"
                    },
                    'view2@test': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('test.subs');
    }]);

You can create basic views and subtasks in your application, for your application you can create basic views for login pages and the control panel, and then, if necessary, you can load subtitles on the page of your panel.