Using $routeProvider manage multiple views

Question

I have developed Angular Project in that i have use $routeProvider for the routing purpose

function config($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.view.html',
            controllerAs: 'vm'
        })

        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login/login.view.html',
            controllerAs: 'vm'
        })

        .otherwise({ redirectTo: '/login' });
}

Now the problem is that i have one single layout file which contains the header and footer of the project and those should be include in every controller action default. I am done with $stateProvider.

routerApp.config(function($stateProvider, $urlRouterProvider) {   

$urlRouterProvider.otherwise('/home');  

$stateProvider       

    // multiviews
    .state('about', {
        url: '/about',

    data: {
    requireLogin: true  
  },
        views: {

            // the main template will be placed here (relatively named)
            '': { templateUrl: 'about.html' },

            //  the child views (absolutely named)

            // for column #1, defines a separate controller 
            'column1@about': { 
                templateUrl: 'column1.html',
                controller: 'column1Controller'
            },

            // the child views (absolutely named)
            'column2@about': { template: 'column #2!' },

            // for bottom row, defines a separate controller shares with column #1 
            'bottom-row@about': { 
                templateUrl: 'bottom.html',
                controller: 'column1Controller'
            }
        }      
    });});

But in my project i have use $routeProvider can you please guide me for how to make default layout for header and sidebar using $routeProvider?

Doesn't make sense to have 2 routers ... ngRoute and ui-router. This is confusing. Switch all to `$stateProvider` and remove `ngRoute` dependency — charlietfl, Jun 03 '16 at 11:35
@charlietfl that is the last solution which i have.. but i have implementated $routeProvider so if you have any solution with $routeProvider — Nitin, Jun 03 '16 at 11:39
ngRoute is quite limited compared to ui-router. There are no nested views in `ngRoute` — charlietfl, Jun 03 '16 at 11:41

score 3 · Accepted Answer · answered Jun 03 '16 at 11:29

You can use ng-include to include all the necessary section of the main html where you have ng-view declared.

Sample part of main html would look like

<header ng-include="'path/to/header.html'"> </header>
<div class="main-body" ng-view></div>
<footer ng-include="'path/to/footer.html'"> </footer>

Hope this helps.

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

I didn't get your requirement correctly....I think,

You have included your header and footer in the main layout and you need separate controller for header and footer.

But with $rootProvider it is not possible.

My solution is,

You can add header and footer actions (I think it will be globally accessible) with in the angular module run like follows,

myApp.run(function($rootScope) {
        $rootScope.globalFoo = function() {
            alert("I'm global foo!");
        };
    });

Refer this link for more details

edited May 23 '17 at 12:14

Community

1
1

answered Jun 03 '16 at 11:37

Reshma Reghunatha Panicker

1,091
10
22

let me give you simple illustration: i have two layout one before login and another after login so if i'm not login then header and footer should be same for all the page which view without login and same for after login. hope you now get my point.. and the solution what you have provided isn;t that common for every scenario means after login and before login?? – Nitin Jun 04 '16 at 04:17

Using $routeProvider manage multiple views

2 Answers2