整理书籍内容(QQ:283125476 发布者:M 【重在分享,有建议请联系-》QQ号】)
HTML文档
HTML文档是一个纯文本文件,包含了页面的结构以及由CSS定义的样式,或者可以操作样式的JavaScript。
HTML节点
HTML节点是嵌套在另一个元素内的元素或一串字符。除了文本节点外,所有元素都是节点。
HTML元素
HTML元素由一个开始标签和一个结束标签组成。
HTML标签
HTML标签用来标记元素的开始和结束。标签本身用尖括号来生命。
开始标记的名字会同时被当作元素的名字,同时标签还会包含用来修饰元素的属性。
属性
属性用来给HTML元素添加额外的信息。这些属性设置在开始标记中。可以使用如KEY=“VALUE”的键值对设置它们,或者只设置键。
指令:自定义HTML元素和属性
基于我们对HTML元素的理解,指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。例如:我们创建一个自定义元素,它实现了标签的功能并且能在所有浏览器中工作:
Caneventaketext
注意,这个自定义元素使用了特殊的开始和闭合标签my-better-video,以及my-href这个自定义属性。为了让这个标签更有用,
可以将浏览器默认的video标签重载,用下面这种写法代替它:
正如我们看到的那样,指令可以和其他指令或者属性组合在一起使用,这种组合使用的方式叫做合成。
HTML引导
当浏览器加载一个包含AngularjS应用的HTML时,我们只需要一小段很简单的代码就能够启动AngularJS应用。
在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性的形式来使用,因此可以将这它写到任何位置
,但是写到的开始标签上椒最常用的做法:
- .内置指令椒打包的AngularJS内部的指令,所有内置指令的命名空间都使用ng作为前缀。为了防止命名空间
冲突,不要在自定义指令前加ng前缀。
做好如上的准备,就可以在HTML元素中使用所有内置或自定义的指令了。同时,基于JavaScript的原型继承机制,任何
在这个根元素内部的指令只要能够访问作用域,就可以访问$rootScope。这里的能够访问作用域指的是同DOM进行了链接,这个操作
会在指令稍后的生命周期中今进行。
我们的第一个指令
学习指令最快的方式就是使用它,现在就开始创建一个自定义的指令。
假设我们已经创建了一个完整的HTML文档,其中包含了AngularJS,并且DOM中已经用ng-app指令标识出应用的跟元素,当AngularJS编译THML时
就会调用指令。
调用指令意味着执行指令背后与之相关联的JavaScript代码,这些代码是我们用指令定义写出来的。
myDirective指令的定义看起来是这样的:
angular.module('myApp',[])
.directive('myDirective', function() {
return {
restrict: 'E', //限定
template: '
Click me to go to Google'
};
});
通过AngularJS模块API中的.directive()方法,我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符
串是这个指令的名字,指令名应该是驼峰命名风格的,函数应该返回一个对象。
.驼峰命名风格用来将一个短语写在一个单词中,除了第一个单词外其他单词首字母大写,中间不加空格。例如,bumpy roads用驼峰风格来写应该是bumpyRoads。
.在我们的例子中,在HTML里使用my-directive声明指令,因此指令定义必须以myDirective为名字。
directive()方法返回的对象包含了用来定义和配置指令所需的方法和属性。
为了尽快掌握简单的属性定义,我们只用了restrict和template两个设置项来定义指令。
默认情况下,AngularJS将模版生成的HTML代码嵌套在自定义标签内部。
在指令定义中添加一些新的设置:我们可以将自定义标签从生成的DOM中完全移除掉,
并只留下由模版生成的链接。将replace设置为true就可以实现这个效果:
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template: 'Click me to go to Google'
};
});
从现在起,我们把创建的这些自定义元素称作指令(用.directive()方法创建),因为事实上声明指令并不需要创建一个新的自定义元素。
声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能。
如下都是用来声明前面创建指令的合法格式:
为了让AngularJS能够调用我们的指令,需要修改指令定义中的restrict设置。这个设置告诉AngularJS在编译HTML时用哪种声明格式来匹配指令
定义。我们可以指定一个或多个格式。
例如,之前创建的指令中可以指定以元素(E)、属性(A)、类(C)或注释(M)的格式来调用指令:
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'EAC',
replace: true,
template: 'Click me to go to Google'
};
});
无论有多少种方式可以声明指令,我们坚持使用属性方式,因为它有比较好的跨浏览器兼容性:
为了更加明确我们的意图,将restrict设置为字母A(代表attribute):
restrict: 'A'
遵守这个约定的同时,也要注意每个浏览器的内置样式,以便决定指令模版在HTML中是嵌套在声明元素内,还是替换声明元素。
表达式
由于指令可以用属性的形式调用,我们可能会好奇如果给属性赋值会发生什么:
The greeting is: {{ greeting }}
我们将表达式greeting = 'Hello World'赋值给内置指令ng-init。在表达式中,我们将greeting属性的值设置为Hello World,然后计算花括号内的{{ greeting }}
这个表达式的值。
这两种情况都会在当前作用域中计算一个普通的JavaScript表达式。根据这个表达式放置的位置不同,当前作用域可以是AngularJS在应用启动时调用
ng-app实例化的$rootScope,也可以是某个子作用域,比如某个控制器的作用域。
用表达式来声明指令
我们知道声明指令既可以使用表达式,也可以不使用表达式。以下是几个合法的表达式
这里有一个值得注意的问题,赋值给指令的表达式会在哪里个环境中运行?要回答这个问题,首先要了解
一个复杂但非常重要的概念,就是当前作用域,它由DOM周围嵌套的控制器提供。
当前作用域介绍
首先快速了解一下由DOM通过内置指令ng-controller提供的作用域。这个指令的作用是在DOM中创建一个新的子作用域:
HTML
We can access: {{ rootProperty }}
We can access: {{ rootProperty }}
and {{ parentProperty }}
We can access:
{{ rootProperty }} and
{{ parentProperty }} and
{{ childProperty }}
{{ fullSentenceFromChild }}
JAVASCRIPT
angular.module('myApp', [])
.run(function($rootScope) {
// 使用.run访问$rootScope
$rootScope.rootProperty = 'root scope';
})
.controller('ParentController', function($scope) {
// 使用.controller访问`ng-controller`内部的属性
// 在DOM忽略的$scope中,根据当前控制器进行推断
$scope.parentProperty = 'parent scope';
})
.controller('ChildController', function($scope) {
$scope.childProperty = 'child scope';
// 同在DOM中一样,我们可以通过当前$scope直接访问原型中的任意属性
$scope.fullSentenceFromChild = 'Same $scope: We can access: ' +
$scope.rootProperty + ' and ' +
$scope.parentProperty + ' and ' +
$scope.childProperty
});
注意,还有其他内置指令(比如ng-include和ng-view)也会创建新的子作用域,这意味着它们在被调用时行为和ng-controller类似。
我们在构造自定义指令时也可以创建新的子作用域。