AngularJS初探:Hello World

AngularJS是一个最近比较流行的JavaScript框架,由Google的几位工程师发起,致力于消除Web开发过程中的重复性劳动(boilerplate code),最大程度地让开发人员把时间和精力放在应用逻辑上。以下是官方网站上的一个最简单的例子:

<!doctype html>  
<html ng-app>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>  
</head>  
<body>  
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>  
</html>  

可以在jsfiddle上找到实际示例。该例子所实现的功能为:当用户在文本输入框中输入或者删除任何字符时,文本输入框下方的标题会根据输入框中的内容变化而发生改变。如果不使用AngularJS,仅用JavaScript来实现的话,实现方式是这样的:

  1. 监听文本输入框中的键盘事件。
  2. 当文本输入框中发生键盘敲击动作时,获取文本输入框中的字符串。
  3. 重新设定标题中所显示的文本。

可以看到,直接用JavaScript来实现这一功能虽然并不复杂,但却存在两个问题:

  • 开发人员不得不在关注业务逻辑之外,去关注界面的底层逻辑(键盘操作)。
  • 导致重复性代码(Boilerplate code)的产生,尤其是当开发人员经历多个Web应用的开发过程后,这种重复性工作就显得尤其繁琐。事实上,这也是AngularJS的创始人Misko Hevery的初衷:“Technically, all those web apps are the same.”(大致意思)。

而使用AngularJS后,对这个文本输入框-标题联动的功能,所采用的实现方式是这样的:

  1. 对于文本输入框中的内容,定义一个变量(yourName)对其进行存储;变量值与文本输入框中的内容实时绑定(Data Binding)。
  2. 当需要读取文本输入框中的内容时,读取变量值即可。
  3. 当需要改变文本输入框中的内容时,修改变量值即可。

因此,AngularJS可以屏蔽底层的逻辑细节,直接向开发人员暴露应用层的逻辑操作,从而极大地减少重复性代码。事实上,在这个例子中,开发人员甚至都不需要编写一行JavaScript代码。

以下是上面这个例子中所涉及的AngularJS的一些概念。

Directive

上述例子中,由AngularJS所提供的HTML标签属性ng-app和ng-model称之为Directive(指令)。顾名思义,Directive会在相应的HTML标签上添加更多的功能:

  • ng-app。如果一个标签包含ng-app属性,那么该标签即声明使用AngularJS -- 标签内的所有HTML代码都会遵循AngularJS的规则。如果一个标签没有包含ng-app属性,而它所有的父标签也都没有包含ng-app属性,则该标签不会遵循AngularJS的规则。在上述例子中,由于html根标签就有ng-app属性,所以整个网页均遵循AngularJS规则。
  • ng-model。ng-model可用于定义一个输入控件的变量,用于绑定该控件的输入值。
{{}}

AngularJS中,可以使用{{}}操作符来读取变量的值,并将其显示在页面相应处。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!