angularJS---初识指令
angularJS
什么是angularJS
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
angularJs与原生JavaScript对比，最大的不同就是去DOM化，打破传统的MVC框架 构建了VMMV框架。
关键词解释：去DOM化---angularJS不像原生js一样，所有的操作都建立在主动去获取DOM节点，
angularJS可以使用他的指令直接在html标签上绑定数据和事件。
MVC框架---M(Model) 模型的意思 可以理解为数据层（后台数据）--- V（View） 视图的意思
可以理解为页面（html）---- C（controller） 控制器的意思 可以理解为 处理应用程序数据逻辑的部分（比如js）
MVVM框架---Model-View-ViewModel 这种框架的特点就是 Model数据层 和 View视图层 不存在交流，都只能跟VIewModel交互
ViewModel可以看成--数据展示给用户，需要一定的逻辑，这一层就是用来处理这些逻辑的。
之前学到的ajax请求感觉就像是VM层，在view层去请求数据（经过ajax）Model层返回数据（经过ajax）这其实就有点表现和数据分离的意思了。不过angular把这件事情做得比较彻底。也就是angularJS的最大特征：双向数据绑定 更重要的是它可以自动更新，而不用你去写侦听代码。
而指令是angularJS另一大特征：angularJS是通过操作指令来实现某些功能的（不太准确，自己意会）
angularJS的所有指令都是有"ng-"前缀的（其实指令就是在html标签里自定义的的属性，加上前缀，便于识别）
先说一下最最基本的指令：ng-app:一个html文档最好只出现一次，如果出现多次也是只有第一个起作用，并且可以出现在html文档的任何一个元素上。
ng-app作用是告诉子元素以下的指令是归angularJs的，angularJs会识别的。ng-app的值可以为空，当然在练习的时候，在项目中则一定是要赋值的。也就是后面所说的模块。angularJs的使用，有一句一定要牢记在的话“一切都是由模块开始的”。
ng-controller---绑定在html标签上 指定angularJS程序的控制器（用来处理应用程序数据的逻辑部分）可以有多个控制器存在。书写控制器的顺序无所谓,angular不会立刻启用这些控制器,也不会在加载angular.js以后就执行控制器里的代码,也不会注入服务和指令. 当解析html页面的时候,解析到ng-controller,它就去启用该控制器.这个时候,控制器里面的代码才会被执行到,服务等依赖也在这个时间被注入。
ng-bind---该 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。与表达式{{}}是一样的的作用. 两者的区别在于：表达式在页面加载完在被angularJS解析，会在页面中有短暂的影像。
先看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular-ui/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController">
//使用ng-bind绑定变量name到span上 <span ng-bind="name"></span> </div> <script>
//使用angular的module方法定义一个模块 参数1：模块名 参数2：所依赖的模块（数组形式） var app = angular.module('myApp', []);
//使用angular的controller方法定义一个控制器 参数1：控制器名称 参数2：数组的前面是声明注入的内容，可以是n个，最后是个function，function的参数个数也必须是n个，
//必须跟前面声明注入的内容一一对应就这样实现了依赖注入。
app.controller('myController', ['$scope',function($scope){ $scope.name = "tom"; }]); </script>
</body> </html>
ng-repeat----该指令用于循环输出指定次数的 HTML 元素，集合必须是数组或对象。
ng-src-----该指令用于命令angularJS加载指定资源 与src的区别：都是加载资源，写成src=“{{pro.img}}”形式，在页面加载时，会自动解析src的{{pro.img}}部分，但解析不出来就会
返回404错误，当轮到angularJS解析指令时，资源又会被成功解析出来。 写成ng-src="{{pro.img}}"形式，页面加载时，不会解析他，轮到angularJS解析指令时，才会被解析出来，此时不会报错
ng-href-----该指令用于链接地址 与href的区别：同上
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script type="text/javascript" src="../lib/angular.min.js"></script> <style type="text/css" media="screen"> img{width: 100px;} </style> </head> <body ng-app="myApp"> <div ng-controller="myController"> <ul> <!--for(var m = 0; m < obj.products.length; m++){var pro = obj.products[m];}-->
//循环li 有products有多少对象，就循环多少次。pro in obj.products 这条代码 隐式创建了变量pro
//此时pro表示products里的当前对象 <li ng-repeat="pro in obj.products" > <img ng-src="{{pro.img}}" alt=""> <h1 ng-bind="pro.name"></h1> <a ng-href="{{'prodetail.html?id=' + pro.id}}" ng-bind="pro.price"></a> </li> </ul> </div> <script type="text/javascript"> var myApp = angular.module('myApp', []); myApp.controller('myController', ['$scope', '$http', function($scope, $http){ var obj = new Object(); //M => V //V => M // $scope.obj = obj; obj.products = []; obj.products.push({id: 1, name: 'pro1', price: 99, img: '../img/deom.jpg'}); obj.products.push({id: 2, name: 'pro2', price: 199, img: '../img/deom.jpg'}); obj.products.push({id: 3, name: 'pro3', price: 299, img: '../img/deom.jpg'}); $scope.obj = obj; }]) </script> </body> </html>
表现如下：
ng-modol---该指令用于绑定双向数据 作用于input、select、textarea元素上，相当于属性value angularJS是MVVM框架 主要体现在ng-model上。
ng-change---该指令用于监听输入框的值是否发生改变，反生改变则执行函数。通常与ng-model搭配使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script type="text/javascript" src="../lib/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myController"> <input type="text" name="" ng-model="a" placeholder="" ng-change="calc()" /> + <input type="text" name="" ng-model="b" placeholder="" ng-change="calc()"/> = <span ng-bind="a * 1 + b * 1"></span> <span ng-bind="result"></span> <script type="text/javascript"> //M => V //V => M //ng-model => MVVM => 双向绑定的指令，作用于input、select、texteara元素，相当于属性value var myApp = angular.module('myApp', []); myApp.controller('myController', ['$scope', function($scope){ $scope.a = 1; $scope.b = 2; $scope.result = $scope.a * 1 + $scope.b * 1; // 变量a b被绑定到ng-model上 a b虽然会改变 但变量result不变（没有绑定在ng-model上）所以需要ng-change去监听输入值的变化
//变量result得到实时刷新。
$scope.calc = function(){ $scope.result = $scope.a * 1 + $scope.b * 1; } // $.ajax({ // url: 'post.php', // data: {a: $scope.a, b: $scope.b}, // success: function(){} // }) }]); // $.post('post.php', {a: $('#a').val(), b: $('#b').val()}) // $.ajax({ // url: 'post.php', // data: {a: $('#a').val(), b: $('#b').val()}, // success: function(){} // }) </script> </body> </html>
ng-if---该指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。该 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。所有的html元素都支持该指令。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true"> <div ng-if="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> <hr> </div> <p>当复选框取消选中时 DIV 元素将移除。</p> <p>当重新选中复选框，DIV 元素会重新显示。</p> </body> </html>
待续。。。
