AngularJS 从入门到精通（一 指令）

一、介绍

     AngularJS 是google 开发者设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

    AngularJS特点如下：

•     REST Client： RestFul 是主流的接口模式，而AngularJS实现RestFul 接口客户端只需要一行代码即可。

•     MVVM（Model-View-ViewModel）模式：  Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法，和View 进行交互。这种设计模式使得代码解耦合。

•    数据绑定： AngularJS是数据双向绑定。

•    依赖注入：AngularJS支持注入方式把需要的对象，方法等注入到指定的对象中。

•    指令： AngularJS内部自带各种常用指令，同时也支持开发者自定义指令。

•    HTML模板和扩展HTML： AngularJS可以定义与HTML兼容的自定义模板。

二、开始AngularJS

    1. lib 引用，在HTML中引入anjularJS lib，如下：

       可以在AngularJS官网( https://angularjs.org/)下载最新的版本 (1.3.8) 。

    2. 简单例子：

First Name: 

Last Name: 



Full Name: {{firstName + " " + lastName}}

       该例子将会在后续讲解到。

       3.推荐学习网站

        http://www.w3schools.com/angular/angular_intro.asp

        http://campus.codeschool.com/courses/shaping-up-with-angular-js/

三、常用指令

    1. Expression: AngularJS 使用双大括号 {{}} 取值。

    2. ng-app： 初始化AngularJS应用，ng-app 是用来声明使用AngularJS加载页面。

    3. ng-bind: 根据HTML元素的变量名，把HTML 元素的值绑定到指定的元素上。

 	
Name: 
 	

   4. ng-init: 初始化应用数据,使用方式如下：

Name: 
You wrote: {{ firstName }}

       一般情况下，初始化参数不使用ng-init, 我们会使用model或controller代替它，关于model和controller 会在下面介绍到。

    5. ng-model： ng-model 会绑定HTML controller 的值到应用数据，使用方式如下：

First Name: 

Last Name: 



Full Name: {{firstName + " " + lastName}}

   ng-model 还具有以下功能：

        a.为应用数据提供类型验证（number，require,emai, 将在第七节介绍）;

        b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;

        c. 为HTML 元素提供css 样式；

        d. 绑定元素到表单中。

    6. ng-controller

        AngularJS 应用时被controller控制的。

First Name: 

Last Name: 



Full Name: {{fullName()}}

        ng-controller="personController" 是指定controller 对象的名称，在controller 对象中，可以定义属性（$scope.firstName）, 方法（$scope.fullName=function(){...}）等。

    在上面例子中，在personController 对象中创建了两个属性(变量)， 一个函数（function）。

    7. ng-repeat, 是通过遍历集合，循环clone HTML 元素， 类似 for each 功能。

 
  
 
  
 
  
    
 
  
    
 
 
  
        
 {{ x.name + ', ' + x.country }} 
 
  
    
 
  
    

    8. ng-disabled： 禁用元素（text,button, checkbox等），其值为ture 或false 或者一个返回boolean 的表达式等。

    9. ng-show: 显示HTML 元素，值为true时显示，否则不显示。

    10. ng-hide: 隐藏HTML元素，和ng-show相反。

Toggle


First Name: 

Last Name: 



Full Name: {{firstName + " " + lastName}}

    11. ng-click: 类似于click方法，定义AngularJS click 事件。

    12. ng-include： 包含指定一个内容（html, jsp, tag等）。