写点什么

使用 AngularJS 构建大型 Web 应用

2013 年 2 月 06 日

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

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

……

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

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

2013 年 2 月 06 日 02:1246672
用户头像

发布了 340 篇内容, 共 111.9 次阅读, 收获喜欢 2 次。

关注

评论

发布
暂无评论
发现更多内容

JVM Metaspace内存溢出排查与总结

Java老k

Java OOM 内存溢出 metaspace

Java踩坑记系列之线程池

Java老k

Java 线程池

数字货币步伐加快,苏州将于双十二推出数字人民币红包测试

CECBC区块链专委会

数字人民币

一次浪费时间的面试

escray

面经 大龄程序员 面试经历 101次面试

“新鲜出炉”阿里面试终极指南V3.0,符合一线大厂面试点需求

小Q

Java 学习 编程 架构 面试

高速二维码报警定位系统开发,智能报警系统

13530558032

五年Java开发经验,裸辞准备半月面试阿里,阿里巴巴却“不讲武德”,居然面了我7轮,历经千辛万苦终于斩获P7及Offer

Java架构之路

Java 程序员 架构 面试 编程语言

《码出高效:Java开发手册》,每一位想要成为优秀开发工程师的程序员必须要看的一本小册!

Java架构之路

Java 程序员 架构 面试 编程语言

迁移到 Atlassian Data Center 并没有您想象的那么可怕

Atlassian速递

负载均衡 高可用 Atlassian Jira

区块链赋能医疗行业,区块链医疗应用场景开发

13530558032

新图灵测试背后,智能交互点燃了哪些产业可能性?

脑极体

上周我面了个三年 Javaer,这几个问题都没答出来

yes的练级攻略

面试 RPC HTTP

Python进阶——如何正确使用魔法方法?(下)

Kaito

Python

甲方日常 55

句子

工作 随笔杂谈 日常

MySQL选错索引导致的线上慢查询事故

Zhendong

Java MySQL

怎么做好一场分享或者培训

fq

贞炸了!上线之后,消息收不到了!

楼下小黑哥

Java RocketMQ MQ

字节跳动内部授课课件:附图讲解MySQL底层索引结构算法实现

小Q

Java MySQL 学习 编程 面试

奉劝各位Java工程师都要学习这份阿里内部绝密《百亿级并发系统设计》实战教程,大厂面试官可“不讲武德”!

Java架构之路

Java 程序员 架构 面试 编程语言

《华为数据之道》读书笔记:序言

方志

数据中台 数字化转型 数据治理

第九周 性能优化(三)总结

钟杰

极客大学架构师训练营

架构师训练营第 1 期 第 9 周作业

李循律

极客大学架构师训练营

区块链加持,鉴定溯源双保险,科技赋能茅台老酒成零售数字化标杆

CECBC区块链专委会

区块链 大数据 防伪溯源

第十周作业

Geek_4c1353

极客大学架构师训练营

字节面试数据结构与算法:B+树的删除和插入,不够详细你打我

小Q

Java MySQL 学习 面试 算法

一位Java程序员在上家公司CRUD了3年,金九银十想要跳槽面试却屡屡碰壁,感觉很迷茫!网友:这是你安逸太久技术能力跟不上了!

Java架构之路

Java 程序员 架构 面试 编程语言

乘上这艘“智能体”之舟,即刻前往智慧未来

脑极体

架构设计:高并发读取,高并发写入,并发设计规划落地方案思考

互联网应用架构

高并发读,高并发写

iOS AOP 方案的对比与思考

GrowingIO技术专栏

ios aop

数字货币将使货币政策实施更精准有效

CECBC区块链专委会

数字货币

贼好用,冰河开源了这款精准定时任务和延时队列框架!!

冰河

redis 中间件 消息队列 延时队列 Zset

使用AngularJS构建大型Web应用-InfoQ