1、ng-app 定义一个 AngularJS 应用程序（页面加载完自动引用）。
ng-controller 添加应用的控制器。
ng-model 把元素值（比如输入域的值）绑定到应用程序（变量name）。
ng-bind / {{ expression}} 把应用程序数据绑定到某一处的innerHTML 。
（script 标签包含的（ AngularJS 库）放在 <body> 元素的底部可以提高网页加载速度，但必须置于 AngularJS 脚本前。
因为对 angular.module 的调用只能在库加载完成后才能进行。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<!-- 两种写法 -->
<h1>Hello {{name}}</h1>
<p ng-bind="name"></p>
<!-- 表达式{{ expression }}直接“输出”数据 -->
<p>{{ 1*9*8*7 }}</p>
</div>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("xxApp", []);
app.controller("xxCtrl", function($scope) {
$scope.name = "Evan Lee";
});
</script>
</body>
</html>
输出：
2、ng-init 初始化应用程序变量。（一般不使用）
<div ng-app="" ng-init="name='Evan Lee'">
<p>姓名：
<span ng-bind="name"></span>
</p>
</div>
输出：
3、ng-bind / {{ expression}}
数字、字符串、对象、数组
<div ng-app="" ng-init="a=1;b=5;c=4;
pro='四川';city='成都';
person={firstName:'Evan',lastName:'Lee'};
points=[6,10,11,12,13]">
<p>姓：{{ person.lastName }} 名：<span ng-bind="person.firstName"></span></p>
<p>生日： {{ a*b }} . <span ng-bind=" a*c "></span></p>
<p>地址： {{ pro+ " " + city}} <span ng-bind=" pro+ ' ' + city"></span></p>
<p> {{ points[3] }}周年 </p>
<p>following <span ng-bind="points[0]"></span> years</p>
</div>
输出：
4、ng-repeat 重复一个 HTML 元素。
<div ng-app="" ng-init="names=['YY','FF','LL'];
alls=[ {name:'YY',sign:'5'},
{name:'FF',sign:'0'},
{name:'LL',sign:'4'} ]">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<p>使用 ng-repeat 循环对象数组</p>
<ul>
<li ng-repeat="x in alls">
{{ x.name + ', ' + x.sign }}
</li>
</ul>
<div>
输出：
5、ng-disabled 绑定应用程序数据（"myClick"）到HTML的disabled属性。
ng-model 绑定应用程序数据（"myClick"）到 checkbox 元素的内容。
<div ng-app="" ng-init="myClick=true">
<p>
<button ng-disabled="myClick">button</button>
<input type="checkbox" ng-model="myClick"/>选中按钮
</p>
<p> 是否选中按钮：{{ myClick }} </p>
</div>
6、ng-show / ng-hide 显示或隐藏一个HTML元素
<div ng-app="xxApp" ng-controller="xxCtrl">
<button ng-click="isVisible()">hide / show</button>
<!-- ng-show="info" 同 -->
<p ng-hide="info">
firstName: <input type=text ng-model="firstName"><br>
lastName: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.firstName = "Evan";
$scope.lastName = "Lee";
$scope.info = false;
$scope.isVisible = function() {
$scope.info = !$scope.info;
}
});
</script>
输出： 
7、ng-click 单击事件
<div ng-app="xxApp" ng-controller="xxCtrl">
{{ count }}
<button ng-click="count = count + 1">点击+1</button>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope) {
$scope.count = 1215;
});
</script>
输出： 
8、自定义指令
<div ng-app="xxApp" my-dir></div>
<br>
<my-dir>自定义指令！</my-dir>
<script>
var app = angular.module("xxApp", []);
app.directive("myDir", function() {
return {
template : "创建自定义指令!"
};
});
</script>
输出： 
模块和控制器
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<!-- 包含应用模块的定义程序 -->
<script src="xxApp.js"></script>
<!-- 包含控制器 -->
<script src="xxCtrl.js"></script>
//xxApp.js
//[] 参数用于定义模块的依赖关系,存在依赖则在[]内写上依赖的模块名
var app = angular.module("xxApp", []);
//xxCtrl.js
app.controller("xxCtrl", function($scope) {
$scope.firstName = "Evan";
$scope.lastName= "Lee";
});