multiple layout with angularjs in asp.net mvc

Question

I have two layout first for visitor second for management

Rout:

app.config(['$routeProvider',
        function ( $routeProvider) {
            $routeProvider
                .when('/', { templateUrl: 'Home/Main', })
                .when('/Manage', { templateUrl: 'Manage/Index', caseInsensitiveMatch: true })
                .when('/Manage/Item/:itemId?', { templateUrl: '/Item/Index/',caseInsensitiveMatch: true});
        }
      ]);

First ng-view in home/index and second ng-view in manage/index but /Item not loaded in manage ng-view

mellis481 · Accepted Answer · 2015-08-21 15:14:55Z

3

IMO areas in MVC pretty much suck. I hate the idea of duplicating most of your MVC app just to render a different layout.

In my situation, I have a layout for when the user hasn't been authenticated and another layout for when they have. In my case, I have an AngularJS SPA on top of an MVC app. Since it's a SPA, I have a single View with a <div ng-view></div> element. The solution I implemented utilizes the _ViewStart.chtml file:

@{
    if (User.Identity.IsAuthenticated) 
    {
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    else
    {
        Layout = "~/Views/Shared/_UnauthorizedLayout.cshtml";
    }
}

I'm using a conditional with the exposed IPrincipal object, but you could put whatever conditional logic you want in there.

answered Aug 21, 2015 at 15:14

mellis481

4,23512 gold badges79 silver badges133 bronze badges

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

Comments

Mehdi Haghshenas · Accepted Answer · 2014-09-10 12:55:30Z

1

add an area in your mvc project for your manage layout
then create your own route provider for manage layout

app.config(['$routeProvider',
        function ( $routeProvider) {
            $routeProvider
                .when('/', { templateUrl: 'Manage/Home/Main', })
                .when('/Manage', { templateUrl: 'Manage/Manage/Index', caseInsensitiveMatch: true })
                .when('/Manage/Item/:itemId?', { templateUrl: 'Manage/Item/Index/',caseInsensitiveMatch: true});
        }
      ]);

answered Sep 10, 2014 at 12:55

Mehdi Haghshenas

2,4632 gold badges19 silver badges38 bronze badges

Collectives™ on Stack Overflow

multiple layout with angularjs in asp.net mvc

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related