angular.js介绍

1.什么是Angular.js?

Angular.js官方文档给出的定义：完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：解耦应用逻辑、数据模型和视图；——Ajax服务；——依赖注入；——浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）；——测试；——更多功能。

2.一个简单的例子:hello world

  
  


  
  
Hello {{ name }}

这个例子展示了angular.js最基本的功能：数据绑定。

使用angular.js的方式：在HTML页面中引用angular.js，并在某个DOM元素上明确设置ng-app属性即可。ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受Angu-larJS影响。

数据模型对象（model object）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。

双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

在输入字段上使用ng-model指令来实现数据绑定。

如下所示：

Hello{{ person.name }}

这样绑定就设置好了。我们可以观察一下视图是如何更新数据模型的。当输入字段中的值发生变化时，person.name会被更新，而视图将反映出这个更新。我们仅通过视图就实现了一个双向数据绑定。

正如ng-app声明所有被它包含的元素都属于AngularJS应用一样，DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。为了解释这个概念，我们将前面的例子修改成如下的样子：

    
    
Hello {{ person.name }}

3.一个稍微复杂一点的例子

我们创建一个每秒钟走一步的时钟（时钟通常都是这样的），并更新clock变量上的数据：在这个例子中，MyController函数接受两个参数，即该DOM元素的$scope和$timeout。

  

  
  
    

      
Hello {{ clock }}!
    
    
  

实现js代码的分离：
尽管我们可以将所有代码都写在一个文件中，但由于需要将不同的组件分开开发，将代码写在一个文件中会使协同工作变得非常困难。通常情况下，更好的选择是将JavaScript放在单独的文件中，而不是index.html中。我们将script部分放入一个叫app.js中。由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。如果把这个最佳实践应用到上面时钟的例子中，需要把视图中的代码改写成下面这样：

Hello {{ clock.now }}!

在app.js中：

function MyController($scope, $timeout) {    
	var updateClock = function() {        
		$scope.clock = {            
			now: new Date()        
		};        
		$timeout(function() {          
			updateClock();        
		}, 1000);    
	};    
	updateClock();
};

将所有绑定都通过这样的形式放在视图中，是个非常好的主意。