AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

跟着教程学习了几天，给我的感觉就是：不用自己再显式的用js给DOM元素绑定事件，只需添加一个angular特有的字段即可；像是使用后端语言那样对DOM进行操作，比如循环输出数组中的元素；自己写一个控制器，就能对页面进行操作。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

• 使用双大括号语法进行数据绑定；

• 使用DOM控制结构来实现迭代或者隐藏DOM片段；

• 支持表单和表单的验证；

• 能将逻辑代码关联到相关的DOM元素上；

• 能将HTML分组成可重用的组件。

1. AngularJS简介

AngularJS通过ng-directives扩展了HTML。

• ng-app 指令定义一个 AngularJS 应用程序。ng-app指令标记了AngularJS脚本的作用域，在中添加ng-app属性即说明整个都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如

  ，则AngularJS脚本仅在该div中运行。

• ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

• ng-bind 指令把应用程序数据绑定到 HTML 视图。

1.1 一个简单的数据绑定

实时的实现输入框的值

COPYHTML



    
    



    
    

在上面的程序中，实现了在输入框中输入一个值，能马上在p标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量username，ng-bind指令把应用程序变量username绑定到某个段落（上面的p标签）的innerHTML上。

如果去掉html标签上的ng-app，则功能失效

1.2 一个简单的循环输出

在我们使用后端语言模板的时候，通常会使用循环输出一些类似的数据。angular也有这样的功能：

COPYHTML



    
    



    
    

        

            
            

                
name:{{ item.name }}
                
age:{{ item.age }}
            
        
    

首先我们使用ng-init初始化一组数据data，然后使用ng-repeat对data进行循环输出。ng-repeat放在哪个标签上，就是对这个标签进行循环，这里循环的是li标签；其中的每一项就是item，然后可以通过item.name，item.age输出name和age的值。

当然，还可以不使用ng-init初始化数据，直接对数组进行循环：

COPYHTML



    
    



    

        

            
            

                
name:{{ item.name }}
                
age:{{ item.age }}
            
        
    

1.3 AngularJS过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

• currency：格式化数字为货币格式；

• filter：从数组项中选择一个子集；

• lowercase：格式化字符串为小写；

• orderBy：根据某个表达式排列数组；

• uppercase：格式化字符串为大写

过滤器的简单使用：

COPYHTML

    
大写：{{ 'wenzi'|uppercase }}
    
小写：{{ 'Country'|lowercase }}
    

        
        

            
name:{{ item.name }}
            
age:{{ item.age }}
        
    

1.4 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器：

COPYHTML



    
    



    
    

        
{{ name }}
        
{{ age }}
        
{{ male }}
    

angular使用$scope对象来调用控制器，控制器的$scope用来保存angularJS model（模型）的对象。控制在作用域中创建了三个属性：name, age, male。

控制器中还可以添加方法：

COPYJAVASCRIPT
app.controller('Person', function($scope){
    $scope.name = 'wenzi';
    $scope.age = 24;
    $scope.male = 'male';
    // 获取当前时间
    $scope.getTime = function(){
        return (new Date()).getTime();
    }
})

1.5 HTTP

angular中的$http是一个用于读取web服务器上数据的服务。$http.get(url)获取链接url中返回的数据：

COPYHTML

    

        

            
name:{{item.name}}
            
age:{{item.age}}
            
sex:{{item.sex}}
        
    

2. 为DOM添加属性

angular能通过ng-*为DOM添加属性，如：

如下面的代码简单的介绍了这些指令的使用：

COPYHTML
点击
要隐藏的元素

现在我们来写个稍微有点复杂的程序：

COPYHTML

    

        点击+1
        隐藏|显示
    
    

        {{ count }}
    

3. 一个angular应用

学了一些东西，让我们来写一个小的web应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】：

COPYHTML



    
    




    

        我的笔记
    
    

        
    
    

        保存 清除
    
    

        剩余字数：100