需要分层数据的最佳实践

I am new to Angular, watched a number of videos and read docs, but not sure for i have it all compiled in my mind. I've seen a bunch of small simple pieces of code but never saw something complex. Do you know of docs/tutorials/examples to help me implement the following?

我对角度很陌生，看了很多视频和阅读文档，但我不确定我是否已经把它们都写在心里了。我见过一堆简单的代码，但从来没有看到过复杂的东西。你知道一些文档/教程/示例来帮助我实现以下内容吗?

I want to make a SPA forum web application. The forum consists of numerous topic groups, each of which has topics inside, and each topic has multiple comments.
So this is a hierarchy of nested entities like this: Forum -> Topic Group -> Topic -> Comment.
In my SPA I'll need to CRUD any of them or load from server either a single entity (say Comment) or a complex view (a topic with all comments) depending on what user/admin wants.

我想做一个SPA论坛的web应用程序。论坛由多个主题组组成，每个主题组都有主题，每个主题都有多个注释。这是嵌套实体的层次结构:Forum -> Topic Group -> Topic -> Comment。在我的SPA中，我需要CRUD它们中的任何一个，或者从服务器加载一个实体(比如Comment)或者一个复杂的视图(一个包含所有注释的主题)，这取决于用户/管理员想要什么。

I can't find an example dealing with the complex hierarchies. Should their controllers and models be nested or separated? How should I separate their CRUD methods? Do I put them all into the top level of $scope? How do I separate parent/child entities of the same $scope that are used in different controllers? What is the better way to substitute View and Edit templates for data being edited by user? Etc...

我找不到一个处理复杂层次结构的例子。它们的控制器和模型是嵌套的还是分离的?我应该如何区分他们的CRUD方法?我是否将它们都放在$scope的顶层?如何分离在不同控制器中使用的相同$作用域的父/子实体?对于用户编辑的数据，什么是更好的替代视图和编辑模板的方法?等等……

Or better, is there a sample for the task like mine?

或者更好的是，是否有类似于我的任务的示例?

Thanks

谢谢

2 个解决方案

#1

I avoid nesting controllers (making controllers depends on scope of their parent controllers), and instead make custom services through which controllers communicate.

我避免了嵌套控制器(使控制器依赖于它们的父控制器的范围)，而是通过控制器通信来定制服务。

Routing of controllers was the biggest issue for me. I've initially started by using ngInclude and handling routing manually, because AngularJS doesn't allow multiple ngViews. Solution was Angular UI Router. They have a simple example that can give you an idea on how to structure your navigation.

控制器的路由对我来说是最大的问题。我最初是通过手工使用ngInclude和处理路由开始的，因为AngularJS不允许多个ngview。解决方案是角UI路由器。他们有一个简单的例子可以让你了解如何构建你的导航。

Basic principle is:

基本原则是:

• Any view can have sub view (and it's controller therefore contains sub-controller)
• 任何视图都可以有子视图(它的控制器包含子控制器)
• Controllers in hierarchy don't communicate directly through their $scopes. Rather they should use services or events ($scope.$emit, $scope.$on)
• 层次结构中的控制器不直接通过它们的$作用域进行通信。他们应该使用服务或事件($scope)。释放美元,美元范围。)
• Any level of depth can be routed to (e.g. http://myforum.com/#/help-category/how-do-i/msg1)
• 任何级别的深度都可以被路由到(例如:http://myforum.com/#/help-category/how-do-i/msg1)

Take my view with a grain of salt because I'm fairly new to Angular.

对我的观点持怀疑态度，因为我对棱角比较陌生。

---

Since you're interested in scope inheritance here's an example, but this is discouraged for communication between controllers.

由于您对范围继承感兴趣，这里有一个例子，但是不鼓励控制器之间的通信。

When a controller has a parent controller, then it's scope has a parent scope:

当控制器有父控制器时，它的作用域有父作用域:

Parent controller:

父母控制器:

$scope.Breakfast = 'eggs';
alert($scope.Breakfast); // Shows eggs

Child controller:

子控制器:

alert($scope.Breakfast); // Shows eggs, inherited value
$scope.Breakfast = 'muesli';
alert($scope.Breakfast); // Shows muesli, new value

Parent controller:

父母控制器:

alert($scope.Breakfast); // Shows eggs, value remained same
$scope.Breakfast = 'burek'; // Child doesn't see this change anymore

You can get better description and illustrations in Angulars developer guide.

您可以在Angulars开发人员指南中获得更好的描述和说明。

#2

One quick note: don't forget that angular is all about your custom directives, so ideally your html for topic template should look like this:

一个注意事项:不要忘记角化是关于自定义指令的，所以理想情况下，主题模板的html应该是这样的:

<div ng-controller="TopicCtrl">
    <comment ng-repeat="comment in topic.comments"></comment>
</div>

Angular really allows to write code unbeliavably DRY, so don't be afraid of directives, they will help you with achitecturing your application structure very much.

角真的允许编写代码，所以不要害怕指令，它们将非常有助于您构建应用程序结构。