一、 环境搭建
1. Mac、Linux、Windows系统中安装java运行环境，（进行单元测试时使用）
java -version
用来检查java是否安装
2. 安装nodejs
node -v
3. 安装web浏览器及文本编辑器
二、 开始
1. 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.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>
</div>
</body>
</html>
2. Angular是一个javascript框架，引入方式：script标签（可在线可下载）
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS把应用程序数据绑定到 HTML 元素
AngularJS可以克隆和重复 HTML 元素
AngularJS可以隐藏和显示 HTML 元素
AngularJS可以在 HTML 元素"背后"添加代码
AngularJS支持输入验证
3. AngularJS指令：以ng作为前缀的html属性
ng-directives:扩展html
ng-app: 定义一个AngularJS应用程序的根元素，告诉angular，div元素师angular程序的“所有者”
ng-init：为AngularJS应用程序定义了初始值。（多用控制器货模块来代替）
ng-model:把html元素绑定到应用程序数据（还可以为数据提供类型验证、为数据提供状态、为html提供css类、绑定html元素到html表单），把输入域值绑定到应用程序变量name
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
ng-bind:把程序数据绑定到html视图，把应用程序变量name绑定到某个段落的innerHTML
ng-repeat:重复一个html元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
创建自定义指令，使用.directive函数来添加自定义的指令；调用自定义指令，html元素上需要添加自定义指令名；使用驼峰法命名指令，以“-”作为元素标签
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
4. AngularJS表达式
写在{{}}中间；
把数据绑定到html，同ng-bind
将表达式写在输出位置
可以包含文字、运算符、变量等表达式 {{5+5}}
5. AngularJS应用
AngularJS模块定义了AngularJS应用
var app = angular.module('myApp', []);
AngularJS控制器用于控制AngularJS应用
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
ng-app指令定义了应用，ng-controller定义了控制器
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
6. AngularJS Scope（作用域）【model层】
scope是一个javascript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。Scope在MVC模型中属于M层，包含当前视图中可用的数据
作用范围：
1）根作用域：$rootScope，所有应用都有，它可以作用在ng-app指令包含的所有html元素中。
7. 控制器【controller层】
AngularJS控制器控制AngularJS应用程序的数据，是常规的javascript对象
当应用程序比较大的时候，控制器可以像js外部文件一样，储存在外部文件中。
8. 过滤器
用于转换数据。（currency, filter, lowercase, orderBy, uppercase)
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
9. 服务
AngularJS中，服务是一个函数货对象，在应用中可以使用。angular自己本身有内置服务。（个人觉得有些像内置对象）
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();//location是服务，返回当前页面url
});
$location: 获取url
$http: 服务向服务器发送请求，应用相应服务器传回来的数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout: 对应window.setTimeout
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
$interval: 对应window.setInterval
10. 前后端交互
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
11. AngularJS对html dom的操作
1）ng-disabled：指令直接绑定应用程序数据到html的disabled属性
<button ng-disabled="mySwitch">点我!</button>
2）ng-show：隐藏或显示一个html
<p ng-show="true">show/p>
<p ng-show="false">disable</p>
3）ng-hide：隐藏或显示html元素
<p ng-hide="true">不可见</p>
<p ng-hide="false">可见</p>
12. AngularJS事件
1）ng-click指令
<button ng-click="count = count + 1">点我！</button>
13. AngularJS模块
模块定义一个应用程序，是应用程序中不同部分的容器，模块是应用控制器的容器，控制器同城属于一个模块
添加模块：
var app = angular.module("myApp", []);
添加模块后添加控制器。
个人感觉很多地方还是和vue挺像的，可以互相帮助理解。
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)