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>

 

posted @ 2015-08-03 00:11  Outyua  阅读(131)  评论(0编辑  收藏  举报