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>
待续。。。
angularJS---初识指令的更多相关文章
- AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS初识
AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...
随机推荐
- PATH_INFO, SCRIPT_NAME, REQUEST_URI区别示例
- Java基础知识陷阱(八)
本文发表于本人博客. 这次我来说说关于&跟&&的区别,大家都知道&是位运算符,而&&是逻辑运算符,看下面代码: public static void m ...
- javascript使用百度地图api和html5特性获取浏览器位置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...
- [转]DNS服务器原理详解与Centos6.x下搭建DNS服务器
转自:http://blog.it985.com/8958.html DNS 数据库的记录:正解,反解, Zone 的意义 通过DNS解析过程详解这篇文章,我们知道了要想访问www.zmit.cn,最 ...
- 性能调优之MySQL篇二：MySQL配置文件My.ini配置文件优化
[mysqld]port = 3306serverid = 1socket = /tmp/mysql.sock skip-name-resolve #禁止MySQL对外部连接进行DNS解析skip-g ...
- iOS 使用markdown 实现编辑和预览文本
注意要点: 1.在iOS 可以依赖UIWebview 来实现 2.丰富的UI样式依赖 html 的样式, js 调用插入markdown内容呈现出来 3.实现markdown编辑快捷键:参考githu ...
- FileSystemWatcher监听文件是否有被修改
作用:监听文件系统更改通知,并在目录或目录中的文件更改时引发事件. 需求:监听特定文件是否修改,然后做出相应的操作. 方法: ①利用一个线程,一直去查找该指定的文件是否有被修改,如果修改则操作特定步骤 ...
- 关于Mvc的分页写法
关于asp.net mvc的分页,网上已经有很多了.本来也想借用,先看了杨涛写的分页控件,感觉用起来稍微有点复杂,而我只需要简单的分页.分页我写过很多次,原理也熟悉,就是构造首页.上一页.下一页及末页 ...
- （转）国内yum源的安装(163，阿里云，epel)
国内yum源的安装(163,阿里云,epel) ----阿里云镜像源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...
- yield生成器函数
生成器有主要有四种方法: next() 执行函数,直到遇到下一个yield为止,并返回值 send(value) 为生成器发送一个数值,next()方法就相当于send(None) close() 终 ...