AngularJS开发指南16：AngularJS构建大型Web应用详解

AngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML功能，从而在web应用程序中使用HTML声明动态内容。在该团队工作的软件工程师Brian Ford近日撰写了一篇blog，分享了如何使用AngularJS构建大型Web应用的经验。这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义。

这篇blog特别关注的是大型应用程序，作者首先给出的建议是，尽量不要让应用变得太巨大。而应该编写小型、功能专注的、模块化的部分，然后逐渐把它们组合起来，变得越来越大，从而构成你的应用。

接下来，Brian Ford首先讲述了如何组织应用的结构，然后对性能、测试、工具、服务器和构建过程做了简要的总结。

在应用的组织结构方面，Brian Ford针对各个方面给出如下建议：

目录：建议在根目录中只放置index.html一个文件，然后根据需要创建scripts、styles、views等目录，在scripts目录下，首先会存放app.js文件，然后在这个目录下又可以创建多个子目录，如：controllers、directives、filters、services、vendor等，在其中分类地存放不同的内容。并且，随着你为应用创建更多内容，也许会增加更多子目录来存放各种文件。

文件：每个文件中应该只有一件事物，这件事物可能会是控件、指令、过滤器或者服务等等。这会生成比较小但更专注的文件。也有利于更好地进行测试。

模块：首先在app.js中定义和配置所有模块，如：

angular.module('yourAppName', ['yourAppDep']);
angular.module('yourAppDep');

然后在模块中定义控件、服务等，如：

angular.module('yourAppDep').controller('MyCtrl', function () {
      // ...
});

依赖关系：一般来说，服务、控件、指令等应该拥有尽可能少的依赖关系，这是非常好的软件开发实践，会有助于测试。API应该分层。控件尤其不能综合多种不同级别的抽象。

指令：对指令使用app专用的前缀，这有助于避免与第三方的组件重名。例如下面的代码中就用“btla”作为前缀：

angular.module('yourAppDep').directive('btlaControlPanel', function () {
     // ...
});

服务：你可以使用下面的方式声明服务：

angular.module('yourAppDep').service('MyCtrl', function () {
     // ...
});

模型：AngularJS作为JavaScript框架，其独到之处就在于让你可以完全掌控模型层。这是AngularJS的强大之处，因为应用程序的核心是你的数据，而各种应用之间的数据又有很大区别。所以Brian Ford强烈建议要仔细考虑如何使用数据，以及将会如何存储数据。

控制器：建议控制器以“Ctrl”开头，如：

angular.module('yourAppDep').controller('MyCtrl', function () {
     // ...
});

除了上述内容，Brian Ford还在文章中针对性能、测试等方面给出了各种建议：

在性能方面，AngularJS应用一般会非常非常快。大多数应用不需要做任何特殊的优化，因此，除非你发现严重的性能问题，否则就应该把时间花在其他方面来改善应用。

对于大型项目来说，测试非常重要。它让你可以自信地进行重构，而这对于保持大型项目代码整洁非常重要。大型应用应该既拥有单元测试，也要拥有端到端（end-to-end）测试。单元测试有助于定位问题，而端到端的测试能够确保整个应用像期望的那样工作。每个控制器、服务、过滤器和指令都应该拥有一系列单元测试。而应用的每个特性都应该拥有端到端的测试。

在工具方面，首先推荐使用Yeoman，从而获得最佳实践和很好的项目结构，另外还有AngularJS Batarang，它对于调试和找到性能瓶颈会很有效。

在服务器方面，你可以使用任何想要的服务器和AngularJS协作。它只是客户端的程序库。我的推荐和喜欢的设置是使用Node.js加nginx。我使用nginx存放静态文件，使用Node.js创建RESTful的API和嵌入的（socketed）应用。对于云提供商，我曾经成功使用过Nodejitsu 和Linode。前者会让你更容易地部署程序，你不需要关心服务器的环境。如果你需要对服务器环境有更多控制，那么Linode会让你从底层控制虚拟机。Linode还提供了很好的API，可以用来管理虚拟机。

构建过程方面，我认为Angular还需要做更多改进，我在2013年最大的目标就是要对此有所贡献。我已经发布了ngmin，希望这个工具可以最终解决为生产环境最小化AngularJS应用的问题。

最后，Brian Ford做出结论：AngularJS是一种非常适合编写大型应用的JS框架。你可以直接拿来使用，它很快，并且会对组织应用的结构很有帮助。

谈谈如何开始使用AngularJS构建Web应用

AngularJS的理念与JQuery库或其他前端JS框架是不一样的，AngularJS的目标是开发Web应用程序。比如使用jsGen搭建的AngularJS中文社区，一般观众会以为这只是一个普通网站，但实际上它是一个运行在浏览器中的应用程序。当浏览器访问网站时，服务器先反馈一个AngularJS应用的引导页jsgen/static/index.html，该页包含了构建完整AngularJS应用的html、css、js等资源路径，浏览器再依照这些资源路径从服务器获取相关资源，构成完整的AngularJS应用。一旦AngularJS应用加载完毕，它就会从网站读取网站信息、文章等数据，或根据用户的请求获取相关数据，将数据插入到AngularJS应用相关位置，并渲染成用户最终看到的网页。组成AngularJS应用的html、css、js等资源都是静态文件，我们可以把这些静态文件独立出来（即jsgen/static目录下的文件），将数据资源相对路径改成服务器的绝对路径，打包放在本地电脑，那么这个本地AngularJS应用依然是可以在浏览器中运行，并与服务器通信获取数据的完整AngularJS应用。说了这么多，只为告诉你一点：AngularJS应用是一个Web程序，而不是从服务器获取的一个一个网页。

AngularJS的四大功能帮你构建Web应用程序：

1. UI视图路由导航

   该功能帮你从一个视图切换到另一个视图，或者在视图中的局部区域切换。在网页中即表现为从一个网页进入到另一个网页，或者一个网页区域更新。实现该功能的指令有ng-view、ng-include、ng-switch、ng-show/hide等。

2. 数据模型双向绑定

   该功能帮你及时更新视图中的数据，或者当你在视图中输入了数据，该数据会立即更新到AngularJS应用的逻辑程序（即JS程序）中。实现该功能的指令有ng-bind、ng-template等，或者最直接最常用的{{}}。而实现双向绑定的基础是作用域！

3. 与远程服务器双向通信

   该功能帮你向服务器请求数据或者发送数据。实现该功能的服务是$http和$resource。

4. 模块化管理

   该功能帮你进行模块化编程，从而实现大型、复杂的Web应用。当然，简单的AngularJS应用也应该使用模块化编程管理，这是一个好习惯。实现该功能的是angular.module，angular.module可以说是AngularJS的基础，所有指令、服务、过滤器、控制器均由它派生。

angular开发指南差不多就这样结束了，接下来，将用angular源码来讲解angular的一些机制是如何实现的，等大家了解了源码之后，就能很轻松的使用angular进行开发了。

 

 

加油！