angular被谷歌收购。后台程序员在写应用的时候，发现前端比较松散，就用后台思路编写前端的框架。提供一种新的开发应用的方式。angular刚推出的时候，火及一时。后来，尤雨溪开发了vue，很多人说他是模仿angular，但vue比angular更简单，更方便。目前，vue是一个极为流行的框架。angular上手，比vue要稍微难一点。
将数据和页面绑定在一起，数据变化，页面变化。
- model 数据
- view 视图
- controller 逻辑层
双向数据绑定
模板
MVVM：Model-View-ViewModel
依赖注入
指令
前后端分离：后端只提供数据接口；路由、模板渲染等都在前端完成
html和js分离
减少JS代码，减少DOM元素查找
angular做网页之间的跳转，不是靠a标签，而是靠路由。
angular js是指小于1.5.x
angular是指大于2.0
从1.5.x到2.0版本，2.0几乎是完全重写的版本，除了内部指令外，那些逻辑完全改写，并且重新命名为angular。因为angular 1.x的性能有问题。
目前angular最新版本是4.x。
2.0之后推出了2.2，之后直接升级到4.x。
2.2.0rc，版本都带rc，rc代表向后兼容版本。Release Candidate(候选版本)。
版本2和4几乎完全兼容。
2.x开始是用typescript写的。
JavaScript没有重载，但是typescript有重载。
typescript是JavaScript的一个超集，写法与java几乎一模一样。
现在angular 2的前途还不是很明朗。
为什么不改angular 2呢？
- 已结用了angular js的公司，修改成本过高。
- 没有用angular js的公司，因为有vue在，所以不会选择前途不明朗的angular 2。
coffeescript
angular的错误调试比较难。
给一个例子：
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="./angular.min.js"></script>
</head>
<body ng-init="name='zhar';age=30">
{{5*4}}
{{5*4 ? "true" : "false"}}
<h1>{{name + "--" + age}}</h1>
<input type="text" name="" value="" ng-model="one">
*
<input type="text" name="" value="" ng-model="two">
=
{{one * two}}
</body>
</html>
凡是以ng-开始的，都称为内置指令
ng-app
ng-app 用于表示一个angular应用
angular会从ng-app所在的标签开始，管理这个应用
一个页面或应用中，建议只存在一个ng-app，如果有多个，需要手动启动对应的应用。
目前ng-app=“” 表示使用默认的angular 应用
ng-init
ng-init初始化数据，ng-init=“a=b;c=d....”;
使用ng-init初始化数据，会挂载到很多作用域
在开发正式项目时，不建议使用ng-init做数据初始化
应该交由controller去完成
ng-model 将（表单）视图与模型进行（双向）绑定
ng-repeat遍历对象
遍历数组：ng-repeat=“x in arr”
遍历对象：ng-repeat="(key, val) in obj"
属性：
$first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标值
angular需要一个不重复的值去跟踪数据的变化，当数组内有重复时，将导致angular无法正常跟踪对应值，需要使用track by $index 为遍历指定一个唯一不重复的值
ng-class为元素指定样式名
ng-class=“{true:'class',false:'class2'}[bol]”由bol决定添加哪个样式
ng-class=“{'class1':bol1,'class2':bol2,'class3':bol3}各个变量决定
事件
ng-show是否显示元素，true 显示，false 隐藏
ng-show为false，只是为元素添加一个优先级最高的display：none
ng-if是否显示元素
ng-if为false时，会将元素从DOM树种移除
当元素需要反复隐藏、显示时，使用ng-show
当只显示一次便不再使用的元素，使用ng-if
ng-click 单击事件
ng-mouseover
ng-bind将模型数据输出到页面
可以解决{{}}表达式造成的原样输出问题
错误提示
找不到模块：
Uncaught Error: [$injector:modulerr]
angular.module(moduleName[,depends])创建或获取模块
moduleName: 模块名称String
depends： 依赖的其他模块 Array
当只传入一个名称时，代表获取指定的模块
两个参数时，定义模块，即使不依赖其他模块，也要传入一个空的数组
自己写ng-app
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="myApp"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./angular.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-controller="myController">
{{name}}
</div>
<div ng-controller="myController2">
{{name}}
</div>
</body>
<script>
var app = angular.module("myApp",[]);
// 推断式注入
app.controller("myController",function($scope){
$scope.name = "zhar";
});
// 声明式注入
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
}])
</script>
</html>
其中， app.controller("myController",function($scope)，$scope就是依赖注入。
推断式注入的形式参数必须是$scope；
声明式注入的形式参数可以是任意，但建议仍然用$scope，便于其他人阅读的时候理解。
数组的 0 到 倒数第二项 是该控制需要注入的模块，最后一项是回调函数。
建议一律使用声明式注入，代码压缩混淆后依然能正常运行。因为大部分情况的压缩混淆会把形式参数统一替换称a。
