切片的SPA分成几个组件和使用AngularJS [英] Slicing an SPA into several components and use AngularJS

问题描述

我和AngularJS一个初学者所以这可能是一些完全微不足道。我建立一个Asp.net MVC应用程序（真正交付伸出件微不足道），通过Web API后端（包括登录/注销功能）。

I'm a complete beginner with AngularJS so this may be something completely trivial. I'm building an Asp.net MVC application (really juts delivering insignificant parts) with Web API backend (including login/logout capabilities).

我想在我的应用程序中使用AngularJS。但我有一个有点左右为难怎么给我的网页成几个部分是有些独立工作的。比方说，这是我的页面的简化框架。

I'd like to use AngularJS in my application. But I have a bit of a dilemma how to slice my page into several sections that somewhat work independently. Let's say this is a simplified skeleton of my page.

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

How should I structure my AngularJS parts on my page?

1. 我应该有一个 NG-应用整个页面或对各个组件的几个非嵌套的人我的网页上？


2. 在一个 NG-应用程序的情况下我希望有一个 NG-视图将包括上下文的和的内容的组件。


3. 如何与每个选项的客户端路由（单/多 NG-应用）？

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?
2. In case of a single ng-app I expect to have one ng-view that would include Context and Content components.
3. How about client-side routing with each individual option (single/multi ng-app)?

这是一种可行的方法，或者我应该考虑不同的角度和不同的结构呢？

Is this a viable approach or should I think of Angular differently and structure it differently?

我应该可能对每个组件和一个身份验证服务（通过Web API服务器通信）提供用户授权事项独立的控制器。

I should likely have separate controllers for each individual component and a single authentication service (communicating with Web API on the server) to provide user authorized items.

你有什么建议？

裸记住我在AngularJS一个完整的初学者，但我在服务器端的部分很精通（MVC和API）。

Bare in mind I'm a complete beginner in AngularJS but am very versed in server side part (MVC and API).

推荐答案

让我尝试解决一些担忧

我应该有一个单一的NG-应用整个页面或有几个
  我的页面上的每个单独的组件非嵌套的？

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

有可能只有1 NG-应用每个SPA，所以你不能有每个组件NG-应用程序。你可以有每个组件可以被捆绑到模块NG-应用相关模块。

There can be only 1 ng-app per SPA, so you cannot have ng-app per component. You can have module per component which can be tied into the ng-app related module.

在一个单一的NG-应用程序我希望有一个NG-认为会的情况下，
  包括上下文和内容组成。

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

NG-视图将只包含活动视图的内容。它不需要有任何菜单。可以有类似 RootController 这是整个应用程序的容器。 HTML代码将包含明显的 NG-视图和数NG-包括。

ng-view would only contain the content of the active view. It does not require to have any menus. There can be something like RootController which is container for overall app. The html would consist of the obvious ng-view and number of 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你会像

In your RootController you would have some logic like

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

要不你也可以创建一个对象映射和使用，选择模板

Or else you can also create a object map and use that for selecting the templates

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

这现在可用于选择模板NG-包括

This can now be used for selecting templates in ng-include.

如何与每个选项（单/多NG-应用程序）？

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

路由发生在 NG-视图一部分。选择其他模板基于主视图加载。您还可以看看 UI路由器以提前布线的东西。

Routing happens on the ng-view part only. You select other templates to load based on the primary view. You can also look at ui-router for advance routing stuff.

更新
当身份验证和授权进入图片服务器和客户端的发挥自己的作用。服务器验证，然后可以使用该信息服务不同的模板，如果用户进行身份验证或没有，可以在相同的URL。例如 /家庭/ leftnav 可以基于经过验证的用户服务器不同的内容。同样可以在角边做，但可能是这种行为被绕过，因为它仅仅是JavaScript的。同样适用于API调用（使用的WebAPI），其中服务器可以决定什么发回真。

Update When authentication and authorization comes into picture both the server and client play their part. Server authenticates and then can use that information for service different templates if the user is authenticated or not, and may on the same url. For example /home/leftnav can server different content based on the authenticated user. Same can be done on Angular side but this behavior can be by-passed as it is just javascript. Same holds true for api calls (using webapi) where server can decided what to send back.

在客户端的用户状态可以使用服务\\工厂进行跟踪。像 UserService 与方法\\属性，如的currentUser 可以提供登录用户当前的详细信息，可以注入到服务任何指令，过滤器，控制器，如基于是否以及记录在哪些用户做出决定。

On client side user state can be tracked using a service\factory. A service like UserService with methods\properties like CurrentUser can provide details on the current logged in user and can be injected into any directive, filter, controller which as to make decision based whether and what user is logged in..

这篇关于切片的SPA分成几个组件和使用AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！