angular入门学习文档之一
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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来控制。
以上是关于angular入门学习文档之一的主要内容，如果未能解决你的问题，请参考以下文章
json 可视代码工作室Angular with Firebase片段
typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming