使用AngularJS构建大型Web应用
来源:互联网 发布:淘宝免费赠品网 编辑:程序博客网 时间:2024/05/01 07:33
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框架,欢迎大家分享和讨论。
- 使用AngularJS构建大型Web应用
- 使用AngularJS构建大型Web应用
- 使用AngularJS构建大型Web应用
- 使用AngularJS构建大型Web应用,框架的建议
- 使用AngularJS构建大型Web网站
- 使用 AngularJS 从零构建大型应用
- 构建兼容浏览器的Angularjs web应用
- 使用 AngularJS 和 Electron 构建桌面应用
- 使用 AngularJS 和 Electron 构建桌面应用
- Vue.js学习 Item15 – 构建大型web应用
- 构建大型jQuery应用
- 使用Lineman构建web应用
- 使用Maven构建Web应用
- 第12章 应用 AngularJS 构建单页面应用程序(MVC+EntityFramework +Web API+AngularJs)
- 大型web应用相关
- Yeoman构建AngularJs应用初步
- 使用 HTML5 WebSocket 构建实时 Web 应用
- 使用 HTML5 WebSocket 构建实时 Web 应用
- The World Wide Web
- Cocos2d-x笔记(二)Sqlite数据库基本操作
- CentOS忘记密码,修改root密码
- Android文件命名规范
- ubuntu系统下关于apache2重启问题
- 使用AngularJS构建大型Web应用
- Subversion/Git/ReviewBoard工作流程
- OCP-1Z0-053-V12.02-648题
- linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)
- android项目命名规范
- How to: Find a TreeViewItem in a TreeView
- php单例模式
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象 [转]
- IE6 IE7(Q) IE8(Q) 不支持固定定位(position:fixed)