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使开发 ...
随机推荐
- pycharm激活（转）
1.注册码激活Activation code http://idea.lanyus.com/ 2.服务器激活License server(推荐) 或者http://182.254.242.193:10 ...
- 【JXL】导出Excel
基本设置 // File file = new File("d:\\writetest.xlsx");// WritableWorkbook wwb = Workbook.crea ...
- SQL Server 创建游标（cursor）
游标的定义: 游标则是处理结果集的一种机制,它可以定位到结果集中的某一行,也可以移动游标定位到你所需要的行中进行操作数据.与 select 语句的不同是,select 语句面向的是结果集,游标面向的是 ...
- Java 创建数组的方式， 以及各种类型数组元素的默认值
①创建数组的方式3种 ①第1种方法 public class MyTest { public static void main(String[] args){ //method 1 int[] arr ...
- windows下mysql安装失败的一个解决案例
操作系统:windows8.1,之前安装过mysql,这次安装在配置的最后一部执行“Apply security settings”的过程中弹出经典错误: Access denied for user ...
- mongodb query index 分析
query 的过程及分析: query 是通过Query planner选择最有效的查询plan ,为一个query 被给予一个可用的索引,查询时 query optimizer(最优的查询条件选择器 ...
- java开发中的诡异事件
1.Excel中的诡异'\r' 2.springMVC中参数莫名的不匹配 今天在使用springmvc测试一个controller方法一直访问失败,400错误,百思不得其解 先是问同事,然后一起讨论了 ...
- HTTP协议中的COOKIE机制简单理解
1.为什么会有COOKIE这种机制 首先一种场景, 在一个网站上面, 我发起一次请求,那服务器怎么知道我是谁?是谁发起的这次请求呢, HTTP协议是无状态的协议, 浏览器的每一次请求,服务器都当做一次 ...
- Typora 配置说明
目录 Typora 配置说明 贴图功能 自定义快捷键 快捷键使用 Linux下安装typora Typora 配置说明 为了更好的使用markdown,解决markdown中不如Word的不便之处,对 ...
- Vjudge - E - 这是高中数学向量题
2017-07-15 22:29:06 writer:pprp 评价,用到了叉乘,很麻烦,C++构造知识必须扎实 题目如下: 我们用逆时针方向的顶点序列来表示,我们很想了解这块地的基本情况,现在请你编 ...