Question

我是Angular JS的新手，我正在努力在更大的Django应用程序中创建一个Angular JS支持的仪表板。我已经阅读了很多关于Angular的内容，但仍然有一些问题，关于构建一个Angular应用程序的最佳方法是什么，该应用程序将包含许多独立的小部件。

据我所知，每个HTML文档只能有1个应用程序以及页面上通常1 ng-view调用，我的问题是我应该将每个小部件设置为它自己的应用程序，还是有办法渲染和控制单个应用程序中的多个模块？

目前我在文档的顶部声明了ng-app

<html lang="en" ng-app="dashboard">

如果我只能使用一次ng-view，我不知道如何渲染剩余的小部件？

我知道这个问题非常主观，可能没有完美的答案，只是寻找一些最佳实践或功能性建议。

谢谢！

Answer 1

有一个项目使用AngularJS实现小部件/仪表板功能。

特点：

添加/删除小部件
小工具拖放
任何指令都可以是小部件

现场演示http://nickholub.github.io/angular-dashboard-app

演示源代码https://github.com/nickholub/angular-dashboard-app

Dashboard指令本身https://github.com/nickholub/angular-ui-dashboard

Answer 2

这是非常主观的，但使用多个控制器或指令，如果操作正确，可以为您提供所需的效果。

例如，

<html ng-app="my-dashboard">
  <body>
    <div class="Some structuring thing">
      <ng-include src="my-header.html"></ng-include>
    </div>
    <div class="Some other thing">
      <ng-include src="my-sidebar.html"></ng-include>
    </div>

    etc...

  </body>
</html>

然后，每个部分都可以是它自己的独立组件。从那里，你可以把它分解成控制器......

<div ng-controller="my-header-text">
  <p ng-bind="title">

  etc...
</div>
<div ng-controller="my-header-login">
  <p ng-click="login()">Login</p>

  etc...

</div>

甚至还有指令。

<my-custom-directive words="user.name"></my-custom-directive>

这个例子真的有点过分，但重点仍然存在;你可以通过很多方式控制粒度。

就个人而言，这些是我喜欢遵循的规则。

每个文件一个app（按照规定，也因为它有意义。）
每个DOM子树的新控制器，可以独立存在;所以我的登录和仪表板显然有不同的目的，如果我想要粒度，我可以将每个人分成自己的控制器，并使用services来正确处理与我的应用程序根目录的通信。我可以登录任何页面，而不仅仅是仪表板，即使没有登录和退出选项，用户也可以使用仪表板（假设非登录用户有一些默认情况），所以这些部分可以单独使用候选人为自己的控制者。
我喜欢非平凡HTML块的自定义指令。它有助于提高可读性和重用性;只是总是尝试使用isolate范围，如果你不能，请质疑你所做的是否真的是指令。写下您的指令，假设它不仅可以由您的应用程序使用，而且可以使用包含它的任何类似应用程序并遵循正确的API。

Angular JS - 仪表板的最佳实践

2 个答案: