asp.net-mvc - 将 SPA 分割为多个组件并使用 AngularJS

Question

我是 AngularJS 的初学者，所以这可能是完全微不足道的事情。我正在构建一个带有 Web API 后端(包括登录/注销功能)的 Asp.net MVC 应用程序(实际上只是提供无关紧要的部分)。

我想在我的应用程序中使用 AngularJS。但我有点进退两难，如何将我的页面分割成几个独立工作的部分。假设这是我的页面的简化骨架。

问题

我应该如何在我的页面上构建 AngularJS 部分？

1. 我应该为整个页面使用一个 ng-app 还是为页面上的每个单独组件使用多个非嵌套的？
2. 如果是一个ng-app，我希望有一个ng-view，其中包含Context和Content 组件。
3. 使用每个选项(单/多ng-app)进行客户端路由怎么样？

这是一种可行的方法，还是我应该以不同的方式思考 Angular 并以不同的方式构建它？

我可能应该为每个单独的组件设置单独的 Controller ，并使用单个身份验证服务(与服务器上的 Web API 通信)来提供用户授权的项目。

你会推荐什么？

请记住，我是 AngularJS 的初学者，但非常精通服务器端部分(MVC 和 API)。

Answer 1

让我尝试解决一些问题

Should I have a single ng-app for the whole page or have several non-nested ones for each individual component on my page?

每个 SPA 只能有 1 个 ng-app，因此每个组件不能有 ng-app。您可以为每个组件设置一个模块，这些模块可以绑定(bind)到 ng-app 相关模块中。

In case of a single ng-app I expect to have one ng-view that would include Context and Content components.

ng-view 将仅包含事件 View 的内容。它不需要有任何菜单。可能有像 RootController 之类的东西，它是整个应用程序的容器。 html 将由明显的 ng-view 和 ng-include 数量组成。

类似于

<div ng-controller='RootController'>
   <div id="contextMenu"><ng-include  src='contextMenuTemplate'></div>
   <div id="primaryMenu" ><ng-include src='primaryMenuTemplate'></div>
   <div id="secondarMenu" ><ng-include src='secondaryMenuTemplate'></div>
   <div ng-view/>
</div>

在你的 RootController 中你会有一些类似的逻辑

if ($route.path) {
   $scope.contextMenuTemplate="path1";   //path corresponding to the route
}

或者您也可以创建一个对象映射并使用它来选择模板

var viewTemplates= [{
    path:"/home",
    contextMenuTemplate:"path1",
    primaryMenuTemplate:"path2",
    secondaryMenuTemplate:"path3"
}]

现在可以使用它来选择 ng-include 中的模板。

How about client-side routing with each individual option (single/multi ng-app)?

路由仅发生在 ng-view 部分。您可以根据主视图选择要加载的其他模板。您还可以查看ui-router用于高级路由内容。

更新 当身份验证和授权出现时，服务器和客户端都发挥各自的作用。服务器进行身份验证，然后可以使用该信息为不同的模板提供服务(无论用户是否经过身份验证)，并且可以在同一 URL 上。例如，/home/leftnav 可以根据经过身份验证的用户提供不同的内容。在 Angular 端也可以做同样的事情，但是这个行为可以被绕过，因为它只是 javascript。对于 api 调用(使用 webapi)也是如此，服务器可以决定发回什么内容。

在客户端，可以使用服务\工厂来跟踪用户状态。像 UserService 这样的服务，具有像 CurrentUser 这样的方法\属性，可以提供当前登录用户的详细信息，并且可以注入(inject)到任何指令、过滤器、 Controller 中，以做出基于决策的指令、过滤器、 Controller 。是否以及什么用户登录..