Web应用开发框架AngularJS的特性

2014-10-10 MetInfo

 

  已经了解过什么是Web应用开发框架,本文将为大家介绍一种Web应用开发框架的特性——AngularJS,了解其如何实现大规模程序的快速便捷开发。
 
  AngularJS之所以使程序开发变得更灵活、便捷,离不开设计者对这个框架的创造理念和其独特的数据绑定形式。本文通过介绍以下几点AngularJS的主要特性来说明AngularJS如何将动态web开发变得轻松。
 
1. Model View Controller (MVC)
  MVC程序设计模式是19世纪70年代诞生的,model是指程序中的数据,controller是指程序应用逻辑,view则是向用户展现的界面。MVC的核心思想就是将model,controller还有view的代码清晰的分离开。这样可以提高程序的可移植性,使得代码逻辑清晰易懂。如今很多流行的网络开发语言如Ruby on rails都是应用了MVC框架,而AngularJS也是应用MVC框架进行开发的。在AngularJS中,model被存储在对象的属性中,controller就是JavaScript类,而view是文档对象模型也就是我们所说的DOM。
 
2. 数据绑定
  前面提到的AJAX可以实现单页应用的数据更新,但是需要用户界面和JavaScript同步改动。而AngularJS采用了数据的双向绑定方法,使得在不需要编写任何代码的同时就能做到实时改变页面数据。AngularJS通过模板来实现数据绑定。模板就是一些HTML片段,可以通过服务器加载或者自定义在< script >标签中,这里体现了AngularJS另一个好处就是可以自定义标签,这样在编写页面的时候,我们不仅可以使用HTML的标准标签,还可以通过模板使用自定义标签,自定义标签将在指令中具体介绍。当模板加载到浏览器之后AngularJS会将模板和数据整合起来,然后展示出来。如图1所示,1到3为基本步骤,当需要遍历和数据绑定的时候执行4,5。数据的加载和模板的加载是异步的,将模板和数据分离开来,使得模板可以被浏览器缓存下来,在第一次请求之后,只需要将新的数据加载到浏览器中即可,这样即提高了程序性能,又实现了数据实时更新,这就是数据绑定。在AngularJS中,数据绑定有两种形式,一种是调用ng-bind指令,而另一种则是通过{{}}来实现。两种形式是基本等价的,但是当页面第一次加载的时候使用花括号的形式可能让用户看到未完全加载的界面,所以在初始页面的加载过程中,建议使用ng-bind指令绑定数据。
 
Web应用开发框架的特性
 
3. 指令
  上文我们提到的ng-app,ng-bind都 是AngularJS的内置指令。指令是绑定在DOM元素上的函数,它的作用就是辅助定义应用程controller及$scope对象、操作文档对象模型,如上文所说,我们可以利用指令来扩展HTML标签,通过增加声明新标签来实现特殊功能。
 
4. 依赖注入
  依赖注入是AngularJS中一个极为重要的特性,所谓依赖注入就是我们可以简单的获取所需要的东西而不需要去创建那些它所依赖的东西,它是最少知识原则设计模式的一种体现。具体来说就是,当数据在模板中绑定之后,我们可以直接注入$scope对象到我们的controller中对数据进行逻辑处理,而不需要任何函数去创建这个对象。
function HiController($scope) {
$scope.greeting = {text: ‘Hi’};
  如上面这段代码,就是利用$scope函数为模板中greeting绑定的数据赋值。AngularJS中内置的可以注入的对象有很多,如$location,$http,$timeout,$document。在实际编程中,这些对象的依赖注入,很大程度上加速了动态web应用的开发速度。
 
  AngularJS是一种灵活简洁的开发框架,它能满足人们对于动态Web应用程序更多的体验。Web应用开发者需要掌握更多的Web应用开发方法,如果您想了解更多关于Web应用开发方法的知识,可以关注MetInfo官方开展的免费培训,详情请查看:Web应用开发培训