AngularJS的使用方法

1.第一个ng demo

<div ng-app=""  ng-init="name='Kevin'">
<input ng-model="name">
<input ng-model="name1">
<label ng-bind="name1"></label>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

ng-app=""声明该div是一个ng的app

ng-model="name"声明这个input的值赋给name这个变量名

ng-bind="name1"声明这个lable的值绑定到name这个变量名，label的值会随着name变量的改变而改变

ng-init="name='Kevin';name2='Kevin2'"声明出事变量name='Kevin'

2.表达式

<label>{{ name+' lu' }}</label>

表达式放在两个大括号中，name是变量

ng主要有数字，字符串，对象和数组四种变量

操作和定义的方式和js的方法一样

3.指令

ng-app

ng-module

ng-init

ng-bind

参考上面的demo说明

ng-repeat用于克隆html元素，类似for

<div ng-app="" ng-init="list=[1,2,3,4]">
<table border="1">
    <tr><td ng-repeat=" x in list">
        {{x+1}}
    </td></tr>
</table>
</div>

4.控制器

<div ng-app="myApp"  ng-controller="myCtrl">
<input ng-model="name">
<label ng-bind="name"></label>
<label >{{full_name()}}</label>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
    $scope.name='Kevin';
    $scope.full_name=function(){
        $scope.name+' LU'
    })
})

如果ng-app非空，一定要在script中执行语句var app = angular.module('myApp', []);

ng-controller="myCtrl"声明一个控制器

控制器定义了name变量的初始值为Kevin

控制器里面也可以定义function

5.过滤器

过滤器用于转换数据

currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase：格式化字符串为小写。
orderBy：根据某个表达式排列数组。
uppercase：格式化字符串为大写。

用法

{{x+1|currency}}

6.Http

http模块用于发起http请求，获取json格式的数据，并对数据进行操作。

<div ng-app="myapp" ng-controller="myCtrl">
<table border="1">
    <tr ng-repeat=" x in names">
        <td>
            {{x.Name}}
        </td>
        <td>{{x.Country}}</td>
    </tr>
</table>
</div>
<script>
    var app = angular.module('myapp', [])
    app.controller('myCtrl', function ($scope, $http) {
                $http.get('http://www.runoob.com/try/angularjs/data/Customers_JSON.php')
                        .success(function (response) {
                    $scope.names = response.records;
                })
            }
    )
</script>

由于js的跨域问题，这个demo不能在本地执行，跨域就是js发送http请求给除本网站外的其他域名。

一般的浏览器是不允许跨域访问的。

设想如果可以的话，用户在访问一个网站的时候，这个网站可以用js帮用户访问多个其他的网站，这样一方面会消耗用户的CPU和宽带，另一方面可以提升其他网站的访问量。

PHP中运行跨域header("Access-Control-Allow-Origin: *");

Http官方文档

7.表格

由于有ng-repeat，所以ng中显示表格是非常方便的

下面的例子采用http部分的demo

1.使用orderBy过滤器

<tr ng-repeat=" x in names|orderBy :'Country'">

2.使用序号

<td>
    {{$index}}
</td>
<td>
    {{x.Name}}
</td>
<td>{{x.Country}}</td>

3.使用even odd

<td ng-if="$odd" style="background-color:blue">
    {{$index}}
</td>
<td ng-if="$even" style="background-color:red">
    {{$index}}
</td>

如果为奇数，显示蓝色，如果为偶数显示红色。从0开始。

8.HTML DOM

ng-disabled='is_disabled'将改标签的disabled属性绑定到is_disabled变量

ng-show='is_show'将改标签的show属性绑定到is_show变量

ng-hide='is_hide'将改标签的show属性绑定到is_hide变量

<div ng-app="">
    <input type="checkbox" ng-model="is_show">
    <p ng-show="is_show">is_show</p>
    <br>
    <input type="checkbox" ng-model="is_hide">
    <p ng-hide="is_hide">is_hide</p>
    <br>
    <input type="checkbox" ng-model="is_disabled">
    <button ng-disabled="is_disabled">is_disabled</button>
</div>

9.点击事件

demo：点击按钮，内容会显示或隐藏，按钮的文字也会相应改变

<div ng-app="myapp" ng-controller="myctrl" ng-init="is_show=true;label='隐藏'">
    <button ng-click="toggle()">{{ label }}</button>
    <p ng-show="is_show">内容</p>
</div>
<script>
    var app = angular.module('myapp', [])
    app.controller('myctrl', function ($scope) {
        $scope.toggle = function () {
            $scope.is_show = !$scope.is_show
            $scope.label=$scope.is_show?'隐藏':'显示'
                    }
    })
</script>

10.表单

定义一个user对象，然后把表单的内容赋值到对象中

<form ng-app="" ng-init="user={}">
    <input ng-model="user.name">
    <input ng-model="user.age">
<label >{{user}}</label>
</form>

11.API

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

用法：

$scope.x2 = angular.isString($scope.x1);

12.包含页面

a.html

<body ng-app="">
    <div ng-include="'include_A.html'"></div>
</body>

include_A.html

<p>hello</P>

如果在本地调试，两个html在同一个目录下就可以了。

如果在服务器调试：

test.html:

<body ng-app="">
    <div ng-include="'static/include/include_A.html'"></div>
</body>

如果通过URLhttp://www.baidu.com/test 访问到test.html

那么就需要通过URLhttp://www.baidu.com/static/include/include_A.html访问到include_a.html

记住ng-include里面必须包含引号

13.this

在ng-click中，this表示当前的scope作用域

<tr ng-repreat=' item in list'>
    <button ng-click=(change())>item.value</button>
$scope.change=function(){
    this.item.value='new value'
}

函数里面的this.item.value指向html里面的item.value

14.解析html字符串

如果html字符串是angularJS里面的一个变量，需要把这个变量的Html解析出Html对象，显示到页面中

在html中
```
 <span ng-bind-html="html_msg"></span>
```
对变量进行转换


app.controller('ctrl', function ($scope, $http,$sce) {
    $scope.html_msg=$sce.trustAsHtml($scope. html_msg)
})

15.控制器

一个页面可以包含多个控制器，控制器A可以在控制器B里面，也可以在外面例如：

    <div ng-include="'include_item.html'" ng-controller="ctrl1">
    </div>
    <div ng-controller="ctrl2">
        <input value="{{test2}}" type="text">
        <div ng-include="'include_item.html'" ng-controller="ctrl1">
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('app', [])
        app.controller('ctrl1', function ($scope) {
            $scope.test1= 'test1 ctrl1'
            $scope.test2= 'test2 ctrl1'
        })
        app.controller('ctrl2', function ($scope) {
           $scope.test1= 'test ctrl2'
            $scope.test2 = 'ctrl2 ctrl2'
        })
    </script>

定义两个控制器，控制器1只会影响控制器1的内容

16.其他

controller外面的js语句是修改不了controller中scope里面的值的。

17.总结

angularJS是一个js的库。给我印象最深的就是它的功能相当于Python的模板，也就是可以在html中写脚本，这样生成html就会变得非常灵活，例如可以插入if，for语句等，不同的是Python模板中写的是python，而且在服务器生成好html，而AngularJS是在客户端运行，语言是AngularJS的API

参考文档

 参考手册（API）