将 SPA 分割成多个组件并使用 AngularJS

Question

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

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

问题

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

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

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

我应该为每个单独的组件和一个单一的身份验证服务（与服务器上的 Web API 通信）提供单独的控制器来提供用户授权的项目。

你会推荐什么？

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

Answer 1

让我试着解决一些问题

我应该为整个页面创建一个 ng-app 还是多个 我页面上每个单独组件的非嵌套组件？

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

如果是单个 ng-app，我希望有一个 ng-view 包括上下文和内容组件。

ng-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 中选择模板。

如何使用每个单独的选项（单个/多个 ng-app）进行客户端路由？

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

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

可以使用服务\工厂跟踪客户端用户状态。像UserService 这样的服务和CurrentUser 这样的方法\属性可以提供当前登录用户的详细信息，并且可以注入到任何指令、过滤器、控制器中，从而根据用户是否登录以及登录的用户做出决定。 /p>