将SPA切成若干组件并使用AngularJS

Question

我是AngularJS的初学者，所以这可能是完全无足轻重的。我正在使用Web API后端（包括登录/注销功能）构建一个Asp.net MVC应用程序（真正能够提供无关紧要的部分）。

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

问题

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

1. 我的整个页面应该只有一个ng-app，还是我页面上的每个组件都有几个非嵌套的？{/ li>
2. 如果是单ng-app，我希望有一个ng-view，其中包含上下文和内容组件。
3. 每个选项（单/多ng-app）的客户端路由怎么样？

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

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

你会推荐什么？

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

Answer 1

让我试着解决一些问题

  

我应该为整个页面设置一个ng-app还是有几个   我页面上每个单独组件的非嵌套文件？

每个SPA只能有{​​{1}}个，因此每个组件都不能拥有ng-app。您可以将每个组件的模块绑定到ng-app相关模块中。

  

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

ng-app只会包含活动视图的内容。它不需要任何菜单。可能有像ng-view这样的东西，它是整个应用程序的容器。 html包含明显的RootController和ng-view的数量。

像

这样的东西

ng-include

在你的RootController中，你会有一些像

这样的逻辑

<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>

否则您也可以创建一个对象图并使用它来选择模板

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

现在可以使用此选项在ng-include中选择模板。

  

每个选项（单/多ng-app）的客户端路由怎么样？

路由仅在var viewTemplates= [{ path:"/home", contextMenuTemplate:"path1", primaryMenuTemplate:"path2", secondaryMenuTemplate:"path3" }] 部分发生。您可以根据主视图选择要加载的其他模板。您还可以查看ui-router以获取高级路由资料。

<强>更新 当身份验证和授权进入时，服务器和客户端都会发挥作用。如果用户经过身份验证，服务器进行身份验证，然后可以将该信息用于服务不同的模板，并且可以在同一个URL上。例如，ng-view可以根据经过身份验证的用户提供不同的内容。同样可以在Angular端完成，但这种行为可以被旁路，因为它只是javascript。对于api调用（使用webapi）也是如此，其中服务器可以决定要发回的内容。

在客户端，可以使用service \ factory跟踪用户状态。像/home/leftnav这样的具有方法\属性的服务（如UserService）可以提供有关当前登录用户的详细信息，并且可以注入任何指令，过滤器，控制器，以便根据用户是否记录以及记录用户做出决定在..