你的位置:首页 > Java教程

[Java教程]angular入门学习文档之一


 

一、数据双向绑定

angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力。

代码如下:

1、dom结构:


1.<!DOCTYPE html>
2.<html lang="en" ng-app="myApp">
3.<head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <script src="js/angular.js"></script>
7.</head>
8.<body>
9. <form ng-controller="userInfoCtrl">
10. <input type="text" ng-model="userInfo.name">
11. {{userInfo.name}}
12. <p ng-bind="userInfo.age"></p>
13. </form>
14.
15.</body>
16.</html>

2、js代码:


1.var app = angular.module('myApp',[]);
2. app.controller('userInfoCtrl',function($scope){
3. $scope.userInfo = {
4. name: '张三',
5. age: '18'
6. }
7. })
8. app.controller('userInfoCtrl',['$scope',function($scope){
9. $scope.userInfo = {
10. name: '张三',
11. age: '19'
12. }
13. }])

上面的例子简单的实现了ng的双向绑定功能,那么到底是怎么实现的呢?

1、先加载angular.js文件;

2、在根节点html上(也可以是其他任何一个节点,在哪里添加,ng的边界就在哪里产生)添加ng-app指令,它会告诉浏览器,从这个地方开始,里面的内容都用ng去解析渲染;

3、给form添加ng-controller,这是添加控制器(也可以叫作用域)的指令,它的作用是创建一个隔离的$scope对象,什么是$scope?

     提到$scope,还得先从$rootscope说起,$rootScope是ng中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意,这与污染JavaScript的全局作用域是一样的。$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

4、给input添加ng-model指令,值等于变量userInfo.name。ng-model就是实现ng数据双向绑定的指令。ng-model指令用来将input、 select、 textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。(这是第一种绑定方法);

5、{{ }}语法是AngularJS内置的模板语法,它会在内部$scope和视图之间创建绑定。基于这个绑定,只要$scope发生变化,视图就会随之自动更新。(这是第二种绑定方法);

6、尽管可以在视图中使用{{ }}模板语法(ng内置的方式),我们也可以通过ng-bind
指令实现同样的行为。


接下来是Js代码部分的实现

7、ng允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。接下来,就可以在angular.module(‘myApp’)返回的对象上创建我们的应用了。

8、通过ng-controller创建一个作用域,并对作用域中的$scope对象进行操作;

9、在userInfoCtrl这个作用域中,添加控制器逻辑处理的代码。

10、总结:在ng中,通过controller控制器连接了视图与逻辑层,任何一方发生变化都会引起另一方的变化,而实现这个功能的方法则可以通过:ng-model、{{ }}或者ng-bind。


二、常见的几种页面判断


1.ng-switch

ng-switch用来判断输入框的值和预定义的值是否匹配,如果匹配,则显示预定义的视图,反之则显示默认的视图。这个指令和ng-switch-when及on=”propertyName”一起使用,可以在propertyName发生变化时渲染不同指令到视图中。在下面的例子中,当person.name是Ari时,文本域下面的div会显示出来,并且这个人会获得胜利:


1.<input type="text" ng-model="person.name"/>
2.<div ng-switch on="person.name">
3. <p ng-switch-default>And the winner is</p>
4. <h1 ng-switch-when="Ari">{{ person.name }}</h1>
5.</div>

2.ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。


1.<div ng-if="2+2===5">
2. Won't see this DOM node, not even in the source code
3.</div>

因为2+2并不等于5,所以表达式为false,最后这个div会被移除。


3.ng-show、ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏。


1.<div ng-show="2 + 2 == 4">
2. 2 + 2 is 4, do show
3.</div>
4.<div ng-hide="2 + 2 == 5">
5. 2 + 2 isn't 5, don't hide
6.</div>

从结果上来看,ng-if和ng-show/ng-hide似乎效果差不多,但两者的最大区别在于,前者会移除dom结构,而后者不会移除dom结构,只是通过样式的display:none和display:block来控制。