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