angular JS

AngularJS有五个主要核心特性，如下介绍：

1.双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

2.模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

3.MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

4.依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

5.指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

AngularJS是以一个JavaScript文件形式发布的，可通过script标签载入AngularJS脚本，如下所示：

<script type="text/javascript" src="../js/angular.min.js"></script>

复制以下代码.

<html ng-app>

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。

我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值：

<div ng-app="" ng-init="quantity=1;price=5"> 
    </div>
    //或者
    <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
     
    </div>

数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内：{{ expression }}。

我们就可以使用表达式这样调用初始化的变量值，如下。

<div ng-app="" ng-init="name='Hello World'">
　　{{ name }}
</div>

ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

使用ng-model指令对数据进行绑定。

<div ng-app="">

<p>请输入任意值：<input ng-model="name" type="text"></p>

<p>你输入的为： {{ name }}</p>

</div>

通过ng-click定义一个AngularJS单击事件。

对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：

<div ng-app="" ng-init="click=false">

　　<button ng-click="click= !click">隐藏/显示</button>

　　<div ng-hide="click">

　　　　<p>请输入一个名字：<input ng-model="name" type="text"></p>

　　　　<p>Hello <span ng-bind="name"></span> </p>

　　</div>

</div>

用ng-controller指令来创建一个简单的控制器定义：

<div ng-app="" ng-controller="MyController">

　　<p>请输入一个名字：<input ng-model="person.name" type="text"> </p>

　　<p>Hello <span ng-bind="person.name"></span> </p>

</div>

<script>

function MyController($scope) {

　　　　$scope.person = {

　　　　name: "World"

　　　　};

　　}

</script>

如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。

现在我们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个 JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。

作用域呢，就是作为$scope的数据属性关联到DOM上的，并且能在需要调试的时候被获取到。

要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。

ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。

<div ng-app="" ng-init="friends = [

　　{name:'Tom', age:25},

　　{name:'Jerry', age:28},

　　{name:'Tom', age:25},

　　{name:'Jerry', age:28}]">

<table>

<tbody>

　　<tr ng-repeat="x in friends">

　　<td> {{ 'Name：'+ x.name +' ，Age：'+ x.age}} </td>

　　</tr>

　　</tbody>
</table>

</div>

管道字符(|)+过滤器名。

过滤器uppercase、lowercase对字符串转换大、小写，如下所示：

<div ng-app="">

请输入: <input ng-model="name" type="text">

<p>结果为： {{ name | uppercase}}</p>

</div>

filter过滤器可以过滤数组并从中选择出一个子集出来，用法是“filter:模型名称”：

<div ng-app="" ng-init="friends = [

　　{name:'tom', age:16},

　　{name:'jerry', age:20},

　　{name:'garfield', age:22}]"> 

　　<p>输入过滤:<input ng-model="name" type="text"></p> 

<ul style="list-style-type:none">

　　<li>姓名，年龄</li>

　　<li ng-repeat="x in friends | filter:name">

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

　　</li>

</ul>

</div>