登录
注册
node.js 学习社区
AngularJS

xc

2015-05-15 12:14

简介


AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。

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属性。

指令

1.ng-app

ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。引用方法很简单,如下所示:

<div ng-app="">
 
</div> 

2.ng-init

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

如下所示,我们为应用程序变量name赋定初始值。

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

3.AngularJS表达式

AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

如前面的示例,我们就可以使用表达式这样调用初始化的变量值,如下。

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

当然我们也可以使用表达式输出数字、数组等等,如下所示:

输出数字,如下示例:

<div ng-app="" ng-init="quantity=12;price=5">
   <p>总价: {{ quantity * price }}</p>
</div>
输出对象,如下示例:
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
   <p>名字为: {{ names[0] }}</p>
</div>

4.ng-model

在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。

如下示例,使用ng-model指令对数据进行绑定。

<div ng-app="">
  <p>请输入任意值:<input type="text" ng-model="name"></p>
  <p>你输入的为: {{ name }}</p>
</div>

ng-model把相关处理事件绑定到指定标签上,这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。

5.ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

如下使用ng-bind指令绑定把应用程序数据

<div ng-app="">
   <p>请输入一个名字:<input type="text" ng-model="name"></p>
   <p>Hello <span ng-bind="name"></span></p>
</div>
PS:使用花括号语法时,因为浏览器需要首先加载页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容,所以对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。

6.ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

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

<div ng-app="" ng-init="click=false">
    <button ng-click="click= !click">隐藏/显示</button>
    <div ng-hide="click">
    <p>请输入一个名字:<input type="text" ng-model="name"></p>
    <p>Hello <span ng-bind="name"></span> </p>
    </div>
</div>
PS:ng-hide="true",设置HTML元素不可见。

控制器

AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的,并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象,它是表达式的执行环境,作用域有层次结构,这个层次和相应的DOM几乎是一样的,作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域,因为有一些指令会生成新的子作用域,当新作用域被创建的时候,他们会被当成子作用域添加到父作用域下,这使得作用域会变成一个和相应DOM结构一个的树状结构。

现在我们就用ng-controller指令来创建一个简单的控制器定义,如下所示:

<div ng-app="" ng-controller="MyController">
   <p>请输入一个名字:<input type="text" ng-model="person.name"> </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 指令属性。

所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。

控制器不仅声明属性也可以声明方法,如下所示:

<div ng-app="" ng-controller="MyController">
      Your name:
        <input type="text" ng-model="username">
        <button ng-click="sayHello()">打招呼</button>
      <hr>
      {{greeting}}
</div>
 
<script>
function MyController($scope) {
  $scope.username = 'World';
  $scope.sayHello = function() {
    $scope.greeting= 'Hello ' + $scope.username + '!';
  };
}
</script>
当然如果是开发条件的需要,我们也可以将控制器写在外部文件中,那如上示例该怎么做呢,很简单,如下简单引用即可:
<script src="MyController.js"></script>

常用指令

ng-hide指令,用于控制部分HTML元素不可见(ng-hide="false")和可见状态(ng-hide="true"),如下:

<div ng-app="" ng-init="click=false">
  <button ng-click="click= !click">我变</button>
   <p ng-hide="click">显示了。</p>
   <p ng-hide="!click">隐藏了。</p>
</div>

扩展内容:

当我们面对一些长列表数据,可能会通过默认隐藏点击显示的形式来展现数据内容,当内容中也会伴随很多数据绑定,这个在页面渲染的时候非常影响性能。

举一个列子,比如说通常angular建议一个页面的数据绑定不超过2000个,假如现在有一个页面直接绑定了2000个model,然后你加载,会发现非常卡.如果你将其中100的model通过ng-show设置为不显示,你会发现还是很卡。

然后你试着将所有的ng-show换成ng-if,你会发现性能瞬间快的像两个应用,这是为什么呢,原因就在于ng-show指令虽然隐藏了但还是会执行其中的所有绑定,而ng-if就不同了,它只会在等于true的时候也就是显示的时候才去执行其中的绑定,这样一来性能就有很大的提高,所以在能使用ng-if的情况,用它代替所有的ng-show和ng-hide吧!

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>

过滤器

使用AngularJS过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。

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

1.过滤器uppercase、lowercase对字符串转换大、小写,如下所示:


<div ng-app="">
请输入: <input type="text" ng-model="name">
<p>结果为: {{ name | uppercase}}</p>
</div>

2.过滤器currency,可以将数字转换成货币格式

3.filter过滤器可以过滤数组并从中选择出一个子集出来,用法是“filter:模型名称”,示例如下:

<div ng-app="" ng-init="friends = [
   {name:'tom', age:16},
   {name:'jerry', age:20}, 
   {name:'garfield', age:22}]">
 
<p>输入过滤:<input type="text" ng-model="name"></p>
 
<ul style="list-style-type:none">
<li>姓名,年龄</li>
  <li ng-repeat="x in friends | filter:name">
    {{ x.name + ' , ' + x.age }}
  </li>
</ul>
 
</div>

原文引用:http://www.cnblogs.com/showtime813/p/4505536.html



回复 · 1

发表回复

你可以在回复中 @ 其他人