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。
