Angular.js简介

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。

实例##

Angularjs下载###

http://angularjs.org

目前1.x的最新版是1.6.2. 暂且用这个来做练习!

Hello World###

学习任何新的语言或技术框架都喜欢写一个经典的"Hello world"程序.
将下面的代码复制到你的编辑器中, 然后在浏览器中打开这个HTML文件.




    
    
    
    AngularJS Hello world Demo
    



    

    Hello {{ hello || 'world'}}

在该示例中, 有以下几点需要注意:

文本输入指令绑定到一个叫hello的模型变量
双大括号标记将hello模型变量添加到问候语文本.
你不需要为该应用另外注册一个事件侦听或添加事件处理程序!

现在试着在输入框中输入文字, 你输入的内容会立即更新显示在问候语中. 这就是Angularjs双向数据绑定的概念. 输入框的任何更改会立即反映到模型变量(一个方向), 模型变量的任何更改都会立即反映到问候语文本中(另一方向).

AngularJS应用解析##

本节描述AngularJS应用程序的三个组成部分, 并解释它们如何映射到模型-视图-控制器设计模式.

模板(Templates)###

模板是用HTML和CSS编写的文件, 展现应用的视图. 你可以给HTML添加新的元素,属性标记, 作为AngularJS编译器的指令. AngularJS编译器是完全可扩展的, 这意味着通过AngularJS, 你可以在HTML中构建你自己的HTML标记.

应用程序逻辑(Logic)和行为(Behavior)###

应用程序逻辑和行为是你用JavaScript定义的控制器. AngularJS与标准AJAX应用程序不同, 你不需要另外编写侦听器或DOM控制器, 因为它们已经内建到AngularJS中, 这些功能使你的应用程序逻辑很容易编写, 测试和维护.

模型数据(Data)###

模型是从AngularJS作用域对象的属性引申的. 模型中的数据可能是JavaScript对象, 数组或基本类型, 这都不重要, 重要的是, 他们都属性AngularJS作用域对象.

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步. 一旦模型状态发生改变, AngularJS会立即刷新反映在视图界面中, 反之亦然.

此外, AngularJS还提供了一些非常有用的服务特性###

底层服务包括依赖注入, XHR, 缓存, URL路由和浏览器抽象服务.
你还可以扩展和添加自己特定的应用服务.
这些服务可以文具你非常方便地编写WEB应用.

引导程序##

还是继续看上面的代码示例, 来进行分析

代码在做什么呢?

`ng-app`指令:####

ng-app指令标记了AngularJS脚本的作用域, 在中添加ng-app属性即说明整个都是AngularJS脚本作用域. 开发者也可以在局部使用ng-app指令, 如
, 则AngularJS脚本仅在该
中运行.

AngularJS脚本标签:###

我们刚刚把静态编码的手机列表替换掉了, 因为这里我们使用ng-repeat指令和两个花括号包AngularJS表达式----{{ phone.name }}和``{{ phone.snippet }}---能达到同样的效果.

在
标签里面的ng-repeat="phone in phones"语句是一个AngularJS迭代器, 这个迭代器告诉AngularJS用第一个
标签作为模板为列表中的每一部手机创建一个
元素.

正如我们在开始时学到的, 包裹在phone.name和phone.snippet周围的花括号标识着数据绑定, 和常量计算不同的是, 这里的表达式实际上是我们应用的一个数据模型引用, 这些我们在PhoneListCtrl控制器里面都设置好了.

image.png

模型和控制器###

在PhoneListCtrl控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数, 数组中存储的对象是手机数据列表):

js/controllers.js文件中的内容如下:
var myapp = angular.module('myApp', []);        // 获取到应用
myapp.controller('PhoneListCtrl', function($scope){    // 给应用添加控制器PhoneListCtrl
    $scope.phones = [
        {"name": "Nexus S",
            "snippet": "Fast just got faster with Nexus S."},
        {"name": "Motorola XOOM™ with Wi-Fi",
            "snippet": "The Next, Next Generation tablet."},
        {"name": "MOTOROLA XOOM™",
            "snippet": "The Next, Next Generation tablet."}
    ];
});
尽管控制器看起来并没有什么控制的作用, 但是它在这里起到了至关重要的作用. 通过给定我们数据模型的语境, 控制器允许我们建立模型和视图之间的数据绑定. 我们是这样把表现层, 数据和逻辑部件联系在一起的.

PhoneListCtrl---控制器方法的名字(在JS文件controllers.js中)和
标签里面的ng-controller指令的值相匹配.

手机的数据此时与注入到我们控制器函数的作用域($scope)相关联. 当应用启动之后, 会有一个根作用域被创建出来, 而控制器的作用域是根作用域的一个典型后继. 这个控制器的作用域对所有标记内部的数据绑定有效.

AngularJS的作用域理论非常重要: 一个作用域可以视作模板, 模型和控制器协同工作的粘接器. AngularJS使用作用域, 同时还有模板中的信息, 数据模型和控制器. 这些可以帮助模型和视图分离, 但是它们两者确实是同步的! 任何对于模型的更改都会即时反映在视图上, 任何视图上的更改都会立即体现在模型中.

如果想要更加深入的理解AngularJS的作用域, 请参看AngularJS作用域文档

测试###

关于JS代码单元测试这一块, 还未去过多的了解, 有机会还会再更新这一部分的内容.

迭代器过滤##

我们在上一步做了很多基础性的训练, 所以现在我们可以来做一些简单的事情. 我们要加入全文检索功能(没错, 这个真的非常简单).

我们的应用应该有一个搜索框. 注意: 在页面上手机列表随着用户在搜索框中的输入而变化.

控制器

我们对控制器不做任何修改

模板###

index.html
    
    
    
    AngularJS Hello world Demo



    

    Hello {{ hello || 'world'}}
    
    
    Search: 
    
        
            
                {{ phone.name }}
                
                    {{ phone.snippet}}
                
            
        
    
我们现在添加了一个标签, 并且使用AngularJS的$filter函数来处理ng-repeat指令的输入.

这样允许用户输入一个搜索条件, 立刻就能看到对电话列表的搜索结果. 我们来解释一下新的代码:

数据绑定: 这是AngularJS的一个核心特性. 当页面加载的时候, AngularJS会根据输入框的属性值名字, 将其也数据模型中相同名字的变量绑定在一起, 以确保两者的同步性.

在这段代码中, 用户在输入框中输入的数据名字称作query, 会立刻作为列表迭代器{ phone in phones | filter:query }其过滤器的输入. 当数据模型引起迭代器输入变化的时候, 迭代器可以高效的更新DOM将数据模型最新的状态反映出来.

image.png

使用filter过滤器: filter函数使用query的值来创建一个只包含匹配query记录的新数组.
ng-repeat会根据filter过滤器生成的手机记录数据数组来自动更新视图. 整个过程对于开发者来说都是透明的.

双向绑定##

在这一步你会增加一个用户控制手机列表显示顺序的特性. 动态排序可以这样实现, 添加一个新的模型属性, 把它和迭代器集成起来, 然后让数据绑定完成剩下的事情.

这里, 我们的应用除了之前添加的搜索框之外, 还需要添加一个下拉菜单, 它可以允许控制电话排列的顺序.

模板###

index.html
    
    
    
    AngularJS Hello world Demo



    

    Hello {{ hello || 'world'}}


    Search: 
    Sort by:
    
    
        
            
                {{ phone.name }}
                
                    {{ phone.snippet}}
                
            
        
    
我们在index.html中做了如下更改:

首先, 增加了一个叫orderProp的

AngularJS学习笔记

Angular.js简介

实例##

Angularjs下载###

Hello World###

Hello {{ hello || 'world'}}

AngularJS应用解析##

模板(Templates)###

应用程序逻辑(Logic)和行为(Behavior)###

模型数据(Data)###

此外, AngularJS还提供了一些非常有用的服务特性###

引导程序##

代码在做什么呢?

ng-app指令:####

AngularJS脚本标签:###

模型和控制器###

测试###

迭代器过滤##

控制器

模板###

Hello {{ hello || 'world'}}

双向绑定##

模板###

Hello {{ hello || 'world'}}

`ng-app`指令:####