BT

使用AngularJS构建大型Web应用

作者 侯伯薇 发布于 2013年2月6日 | 被首富的“一个亿”刷屏?不如定个小目标,先把握住QCon上海的优惠吧!

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

AngularJS的官方网站上给出了这个框架的基本使用方法,如:

  • 如何引入AugularJS,从而让你的web应用使用该框架
  • 如何添加控件,并对其进行数据绑定
  • 如何进行表单验证
  • 如何与服务器通信
  • 如何创建可重用的组件
  • 如何对组件进行本地化
  • 如何让应用可嵌入、可注入和可测试

另外,网站上还给出了一系列教程,跟随这些内容,我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解,进而很好地开始使用这一框架。

但是,正如Brian Ford所说,官方文档中并没有告诉开发者,当应用逐渐增长,其中包含上万甚至几十万行代码的时候,应该如何组织和管理它,而他的blog正是对这些内容以及最佳实践的总结。

这篇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.jsnginx。我使用nginx存放静态文件,使用Node.js创建RESTful的API和嵌入的(socketed)应用。对于云提供商,我曾经成功使用过NodejitsuLinode。前者会让你更容易地部署程序,你不需要关心服务器的环境。如果你需要对服务器环境有更多控制,那么Linode会让你从底层控制虚拟机。Linode还提供了很好的API,可以用来管理虚拟机。

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

……

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

你是否构建过大型的Web应用,是否也曾经使用过AngularJS框架,欢迎大家分享和讨论。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

文章中的链接正是我需要的 by Z Conan

不错,文章中的链接正是我需要的!!

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论
提供反馈
错误报告
商务合作
内容合作
Marketing
InfoQ.com及所有内容,版权所有 © 2006-2016 C4Media Inc. InfoQ.com 服务器由 Contegix提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司 京ICP备09022563号-7 隐私政策
BT

We notice you’re using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.