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

我会全心全意地推荐任何绿地项目，你应该尽一切努力避免在你的申请中使用ng-controller。

如果/当您尝试将任何应用程序升级到AngularJS 2.0版时，这将节省很多心痛。它与当前版本有很大不同，其中一个变化是没有ng-controller。

已经发现它们鼓励开发人员采取捷径而不是设计模块化的松散耦合组件/指令，我们最终得到的是一个紧密耦合的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。

Answer 2

这两种方法几乎相同，因为两者都将做同样的工作。

方法1更清晰易懂。
方法1可以导致代码重用性，因为相同的模板可以用于表示相同类型的模板。
方法1实现了模块化结构，以更微妙的方式表示App。

Answer 3

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

这两者不是互斥的：你可以使用带指令的控制器，没有指令的控制器和没有控制器的指令。

将它们与方法进行比较毫无意义。

如何构建angular.js应用程序

3 个答案: