javascript - AngularJS:需要分层数据的最佳实践

标签 javascript angularjs

我是 Angular 的新手,观看了许多视频并阅读了文档,但不确定我是否已将其全部编译到我的脑海中。我见过一堆简单的小代码,但从未见过复杂的东西。您知道可以帮助我实现以下内容的文档/教程/示例吗?

我想制作一个 SPA 论坛 Web 应用程序。论坛由众多主题组组成,每个主题组内都有主题,每个主题都有多个评论。
所以这是一个嵌套实体的层次结构,如下所示: Forum -> Topic Group -> Topic -> Comment .
在我的 SPA 中,我需要对它们中的任何一个进行 CRUD 或从服务器加载单个实体(例如评论)或复杂 View (包含所有评论的主题),具体取决于用户/管理员的需求。

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

或者更好的是,有像我这样的任务的示例吗?

谢谢

最佳答案

我避免嵌套 Controller (使 Controller 取决于其父 Controller 的范围),而是创建 Controller 通过其进行通信的自定义服务。

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

基本原理是:

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

请对我的观点持保留态度,因为我对 Angular 还很陌生。


由于您对范围继承感兴趣,这里有一个示例,但不鼓励在 Controller 之间进行通信。

当 Controller 有父 Controller 时,它的作用域也有父作用域:

父 Controller :

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

子 Controller :

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

父 Controller :

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 .

关于javascript - AngularJS:需要分层数据的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22304405/

相关文章:

javascript - setState 意外更新非状态属性

javascript - 基于AngularJS中的数组数据动态创建表单?

css - bootstrap col 跳出容器

javascript - Angular ui路由器不区分大小写的查询参数

javascript - 您如何处理具有不同高度的布局列?

javascript - 使用 "this"更新对象内的值

javascript - React 似乎没有将 props 传递给另一个组件

javascript - ng-class 仅适用于 ng-repeat angularjs 中的当前范围

javascript - Windows Metro 应用程序和 Angular 路线 UI 和动态内容

javascript - 如果错误,请重新选中复选框