在asp.net mvc中使用angularjs的多种布局答案

【问题标题】：multiple layout with angularjs in asp.net mvc在asp.net mvc中使用angularjs的多种布局
【发布时间】：2014-09-10 06:03:15
【问题描述】：

我有两个布局，第一个用于访问者，第二个用于管理

溃败：

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});
        }
      ]);

home/index 中的第一个 ng-view 和 manage/index 中的第二个 ng-view 但是 /Item 没有在管理 ng-view 中加载

【问题讨论】：

标签： javascript asp.net asp.net-mvc angularjs angular-routing

【解决方案1】：

MVC 中的 IMO 领域非常糟糕。我讨厌复制大部分 MVC 应用程序只是为了呈现不同的布局。

在我的情况下，当用户尚未通过身份验证时，我有一个布局，而当他们有身份验证时，我有另一个布局。就我而言，我在 MVC 应用程序之上有一个 AngularJS SPA。因为它是一个 SPA，所以我有一个带有 <div ng-view></div> 元素的视图。我实现的解决方案利用了 _ViewStart.chtml 文件：

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

我正在使用带有暴露的 IPrincipal 对象的条件，但您可以在其中放置任何您想要的条件逻辑。

【讨论】：

【解决方案2】：

在您的 mvc 项目中为您的管理布局添加一个 area
然后创建你自己的路由提供者来管理布局

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});
        }
      ]);

【讨论】：