angular入门学习文档之一

时间 2019-11-12

原文原文链接

1、数据双向绑定

angular（下面统一简称ng）强大的地方莫过于它内置的数据双向绑定功能，下面咱们经过一个简单的例子来演示ng强大的双向绑定数据的能力。javascript

代码以下：html

一、dom结构：java

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>

二、js代码：node

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的双向绑定功能，那么究竟是怎么实现的呢？浏览器

一、先加载angular.js文件；app

二、在根节点html上（也能够是其余任何一个节点，在哪里添加，ng的边界就在哪里产生）添加ng-app指令，它会告诉浏览器，从这个地方开始，里面的内容都用ng去解析渲染；dom

三、给form添加ng-controller，这是添加控制器（也能够叫做用域）的指令，它的做用是建立一个隔离的$scope对象,什么是$scope?ide

提到$scope，还得先从$rootscope提及，$rootScope是ng中最接近全局做用域的对象。在$rootScope上附加太多业务逻并非好主意，这与污染JavaScript的全局做用域是同样的。$scope对象就是一个普通的JavaScript对象，咱们能够在其上随意修改或添加属性。this

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

五、{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间建立绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。（这是第二种绑定方法）；

六、尽管能够在视图中使用{{ }}模板语法（ng内置的方式），咱们也能够经过ng-bind
指令实现一样的行为。

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

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

八、经过ng-controller建立一个做用域，并对做用域中的$scope对象进行操做；

九、在userInfoCtrl这个做用域中，添加控制器逻辑处理的代码。

十、总结：在ng中，经过controller控制器链接了视图与逻辑层，任何一方发生变化都会引发另外一方的变化，而实现这个功能的方法则能够经过：ng-model、{{ }}或者ng-bind。

2、常见的几种页面判断

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来控制。