如何构建 angular.js 应用程序

Question

我想知道构建 angular.js 应用程序的最佳方法。我相信所有指令都通过 ajax 请求下载各自的模板。因此，最好将 SPA 的每个不同部分作为一个单独的单元包含在一个指令中，并使用其自己的模板 html 和控制器：

<html>
    <head>
    </head>
    <body>
        <section>
            <directive1></directive1>
        </section>

        <section>
            <directive2></directive2>
        </section>

        <section>
            <directive3></directive3>
        </section>

    </body>

</html>

还是为 DOM 操作保留指令并将所有控制器嵌入主 html 页面更好：

<html>
    <head>
    </head>
    <body ng-app="myapp">
        <section ng-controller="controller1">
            ...
        </section>

        <section ng-controller="controller2">
            ...
        </section>

        <section ng-controller="controller3">
            ...
        </section>

    </body>

</html>

我想知道每种方法在性能、最佳实践等方面的优缺点是什么。提前致谢。

Answer 1

两种方法几乎相同，因为它们都将完成相同的工作。

方法 1 更容易理解。
方法 1 可以实现代码的可重用性，因为相同的模板可以用于表示同类模板。
方法 1 实现模块化结构以更微妙的方式表示应用程序。

Answer 2

您是在将苹果与橙子进行比较。控制器调用服务来检索模型并将它们附加到您的 $scope（换句话说，它们初始化范围）。指令是您可以在视图中使用的可重用组件。

这两者并不相互排斥：您可以使用带指令的控制器、不带指令的控制器和不带控制器的指令。

在方法上比较它们是没有意义的。

Answer 3

我会全心全意地建议任何新建项目，您应该尽一切努力避免在您的应用程序中使用 ng-controller。

这将避免很多心痛 if/when 您尝试将任何应用程序升级到 AngularJS 2.0 版，无论何时发布。它将与当前版本有很大不同，其中一项更改是将没有 ng-controller。

我们发现他们鼓励开发人员走捷径，而不是设计松散耦合的模块化components/directives，我们最终可以得到一个紧密耦合的 n 层控制器层次结构。

鉴于 Angular 2.0

的声明方向，我发现这是一篇非常好的文章，其中包含要考虑的主题

http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html

在项目开始时设计您会自动达到 ng-controller 的指令可能很困难，但我认为从长远来看这是最好的方法。

鉴于在过去几年中开展的 Angular 项目数量巨大，组织内部将进行许多对话，以评估他们是否能够投入所需的努力以离开1.2-1.3 并重写应用程序以便能够使用 2.0.

如何构建 angular.js 应用程序

How to structure an angular.js app

html

javascript

angularjs

single-page-application