如何利用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中定义和配置所有模块,如:

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

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

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

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

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

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

除了上述内容,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的理念与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. 该功能帮你从一个视图切换到另一个视圖,或者在视图中的局部区域切换在网页中即表现为从一个网页进入到另一个网页,或者一个网页区域更新实现该功能的指令有ng-viewng-includeng-switchng-show/hide等。

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

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

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

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

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

上给出了这个框架的基本使用方法如:

  • 如何引入AugularJS,从洏让你的web应用使用该框架
  • 如何添加控件并对其进行数据绑定
  • 如何让应用可嵌入、可注入和可测试

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

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

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

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

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

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

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

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

然后在模块中定义控件、服务等,如:

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

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

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

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

控制器:建议控制器以“Ctrl”开头,如:

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

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

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

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

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

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

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

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

为了更加合法合规运营网站我們正在对全站内容进行审核,之前的内容审核通过后才能访问

由于审核工作量巨大,完成审核还需要时间我们正在想方设法提高审核速度,由此给您带来麻烦请您谅解。

如果您访问园子时跳转到这篇博文说明当前访问的内容还在审核列表中,如果您急需访问麻烦您将对应的网址反馈给我们,我们会优先审核

我要回帖

更多关于 打造一 的文章

 

随机推荐