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 许可

  )

AngularJS入门心得3——HTML的左右手指令

AngularJS入门心得3——HTML的左右手指令

  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’”表示是通过元素来匹配。

当然,以上的页面显示结果都是:

AngularJS入门心得3——HTML的左右手指令

  其实本篇本来是要重点说说scope的理解以及举个例子来聊聊独立scope的一些机制,但是梳理一下就写完了这篇。

  最近一直在熟悉业务,一直也没有跟进AngularJS,倒是在重新认识Javascript,只能说之前对于js的理解实在太浅,后面有时间会继续跟进javascript。

  本文链接:《AngularJS入门心得3——HTML的左右手指令

  如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

  AngularJS入门心得3——HTML的左右手指令

友情赞助

如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。

    1. 支付宝                          2. 微信

AngularJS入门心得3——HTML的左右手指令                      AngularJS入门心得3——HTML的左右手指令

上一篇:spring源码下载及转入ECLIPSE


下一篇:Google Spreadsheet Add-on Links Extractor 谷歌表格插件链接提取器的制作与发布(附源码)