Question

我是Angular的新手，观看过一些视频和阅读文档，但不确定我是否已将这一切都编入我的脑海。我见过一堆简单的小代码，但从未见过复杂的东西。您是否知道帮助我实现以下内容的文档/教程/示例？

我想制作SPA论坛网络应用程序。该论坛由众多主题小组组成，每个主题小组内部都有主题，每个主题都有多个评论所以这是嵌套实体的层次结构，如下所示：Forum - ＆gt; Topic Group - ＆gt; Topic - ＆gt; Comment。
在我的SPA中，我需要CRUD其中任何一个或从服务器加载单个实体（例如注释）或复杂视图（包含所有注释的主题），具体取决于用户/管理员想要的内容。

我找不到处理复杂层次结构的示例。他们的控制器和模型应该嵌套还是分开？我应该如何分离他们的CRUD方法？我是否将它们全部放入$ scope的顶级？如何分隔在不同控制器中使用的相同$ scope的父/子实体？将View和Edit模板替换为用户编辑的数据的更好方法是什么？等等......

或者更好的是，是否有像我一样的任务样本？

谢谢

Answer 1

我避免嵌套控制器（使控制器依赖于其父控制器的范围），而是通过控制器进行通信的自定义服务。

控制器的路由对我来说是最大的问题。我最初开始使用ngInclude并手动处理路由，因为AngularJS不允许多个ngView。解决方案是Angular UI Router。他们有a simple example that can give you an idea on how to structure your navigation。

基本原则是：

任何视图都可以有子视图（因此它的控制器包含子控制器）
层次结构中的控制器不直接通过$scope进行通信。相反，他们应该使用服务或事件（$scope.$emit，$scope.$on）
任何级别的深度都可以路由到（例如http://myforum.com/#/help-category/how-do-i/msg1）

我的观点含糊不清，因为我对Angular很新。

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

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

家长控制器：

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

儿童控制器：

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

家长控制器：

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

您可以获得better description and illustrations in Angulars developer guide。

Answer 2

一个简单说明：不要忘记angular是关于你的自定义指令的，所以理想情况下你的主题模板的html应如下所示：

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

Angular真的允许编写代码不可思议DRY，因此不要害怕指令，它们将帮助您构建非常多的应用程序结构。

AngularJS：需要分层数据的最佳实践

2 个答案: