HelloWorld

 

     
      
      
Hello {
    { name }}
     

　　

虽然这个例子不怎么有趣，但它展示了AngularJS最基本也最令人印象深刻的功能之一：数据绑定。

AngularJS 中的数据绑定

 AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一，也是让我们只用10行代码，并且在没有任何JavaScirpt的情况下就可以写出Hello World的关键。

 

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

 

自动数据绑定，可以将视图理解为模型状态的映射。如：

使用的是webStorm 9.0.1 引入bootStrap 3.3.0

 

   

 

所以当数据模型发生变化时，视图就能反映出相应的变化。如下：

 

 

用ng-model指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段上。当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个事件循环会调用$digest()循环 这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。

 

数据模型对象（model object）是指$scope对象。

$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。如果不理解这个概念也没有关系，后面的例子将会对这个概念进行详细说明。双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染

 

相比每秒钟都更新$scope.clock，更新clock.now的值会是更好的选择,

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

 

 

作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它是如何工作的，非常重要。

应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图

 

AngularJS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说我们可以引用父级$scope中的属性。

 

创建自己的模块（module）

 

　　

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。

 

我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象，把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上，我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上：

 

 

$scope 的生命周期    

当Angular关心的事件发生在浏览器中时，比如用户在通过ng-model属性监控的输入字段中

输入，或者带有ng-click属性的按钮被点击时，Angular的事件循环都会启动。这个事件将在

Angular执行上下文中处理。

创建

在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

链接

当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。

这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。

这些函数被称为$watch函数，Angular通过这些函数获知何时启动事件循环。

 

更新

当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

销毁

当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。

尽管永远不会需要清理作用域（因为Angular会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这个$scope上叫做$destory()的方法来清理这个作用域。

 

指令的作用域    

指令在AngularJS中被广泛使用，指令通常不会创建自己的$scope，但也有例外。比如ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。

比如list信息时候，在控制器里获取数组，这里先用假数据：$scope.infoList,有两笔信息。故在控制器里循环ng-repeat呈现到视图中。

 

 

 

 

 控制器    

 

控制器在AngularJS中的作用是增强视图。在Hello World的例子中，我们并没有使用普通的控制器，而是使用了一个隐式控制器。

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。