AngularJS入门心得3——HTML的左右手指令
在《AngularJS入门心得1——directive和controller如何通信》我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生,弥补了HTML的天然缺陷,用于构件Web应用等。”
那么AngularJS如何弥补HTML的缺陷,指令可能是最好的回答。
指令是什么???
指令就是一些附加在HTML元素上的自定义标记(可以是属性A、元素E、css类C),可以通过AngularJS的HTML编译器($compile)对这些标记附加指定的行为,或者操作DOM、改变DOM元素等。
说白了,就是HTML定义的标签不够多,不够强大,AngularJS通过指令可以让HTML识别更多的标签,具备更强的功能。
1.指令的规范化
在HTML命名规范中,因为不区分大小写,所以类似myCustomer和mycustomer是一样的,那么如何在HTML定义指令呢,常见的可以通过
(1) 加前缀:”x-“和”data-”
(2) 在指令名之间添加间隔符:”:”,”-”,”_”
那么如何将HTML中的指令名转化为js中的变量,相应的,有两种方式:
(1) 从元素或属性的名字前面去掉x- and data-
(2) 从:, -, 或 _分隔的形式转换成小驼峰命名法(camelCase)
举例:
HTML(通过分隔符标示):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
HTML(通过前缀标示):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div data-my-customer></div>
</div>
</body>
</html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
通过在Plunker中的实时显示结果如下:
(ps:Plunker介绍
简介:Plunker is an online community for creating, collaborating on and sharing your web development ideas. Plunker 是一个用来创建、协作和分享 Web 开发思路的在线社区。
官网地址:http://plnkr.co/
特点:
基于 Node.js 环境运行 实时的代码协作 全功能、可定制语法编辑器 代码更改可即时预览效果 代码提示 可 Fork、评论和分享 完全开源,使用 MIT 许可
)
2.指令匹配
AngularJS的$complie编译器可以基于元素、属性、类名以及注释来匹配指令。如:
<my-customer></my- customer >//元素
<span my- customer ="exp"></span>//属性
<!-- directive: my- customer exp -->//注释
<span class="my- customer: exp;"></span>//类名
注意:虽然上面的4种形式都可以进行指令匹配,但是,最好通过标签名和属性来使用指令而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。举例来说:
(1)通过元素匹配
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<my-customer></my-customer>
</div>
</body>
</html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中声明元素标签<my-customer></my-customer>,在js中通过”restrict:‘E’”表示是通过元素来匹配。
(2)通过属性匹配
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example11-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
script.js:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'A',
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
})(window.angular);
在html中声明元素标签<div my-customer></div>,标签div中声明了属性my-customer,在js中通过”restrict:‘A’”表示是通过元素来匹配。
当然,以上的页面显示结果都是:
其实本篇本来是要重点说说scope的理解以及举个例子来聊聊独立scope的一些机制,但是梳理一下就写完了这篇。
最近一直在熟悉业务,一直也没有跟进AngularJS,倒是在重新认识Javascript,只能说之前对于js的理解实在太浅,后面有时间会继续跟进javascript。
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx反向代理配置去除前缀
- 深入浅出java虚拟机
- Maven resources 分环境
- JetBrains Upsource(上源) 研究
- Spring JPA 拓展
- python自学成才之路 死锁的解决方案
- C++核心准则T.40: 使用函数对象向算法传递操作
- web页面性能优化总结及原理解释
- C++核心准则T.41:在模板概念中只对本质属性定义需求
- Linux实用技巧——mail发送邮件命令以及中文乱码解决
- Julia机器学习实战——使用Random Forest随机森林进行字符图像识别
- Python函数——Numpy size()
- Day 1:二维数组中查找
- Day 2:替换空格
- Prometheus监控神器-Kubernetes篇(三)