這是我在簡書上發表的第一篇文章，是關于angular.js的一些重點總結。
介紹
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
AngularJS 實例
<!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>
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
什么是 AngularJS？
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
AngularJS 把應用程序數據綁定到 HTML 元素。
AngularJS 可以克隆和重復 HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代碼。
AngularJS 支持輸入驗證。
AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 實例
<!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>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 應用
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
AngularJS 實例
<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>
AngularJS 模塊定義應用:
AngularJS 模塊
var app = angular.module('myApp', []);
AngularJS 控制器控制應用:
AngularJS 控制器
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
ng-app指令：
AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。
AngularJS 通過內置的指令來為應用添加功能。
AngularJS 允許你自定義指令。
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng。
所有AngularJS都必須需要一個根元素(HTML文檔中只能有一個"ng-app")
表達式{{表達式寫在里面}}
ng-app 是告訴AngularJS當前這個是根元素。
ng-controller 定義一個控制器[寫到哪里說明它里面的子元素可以調用這個函數]
ng-model 綁定數據[input,select,textarea的值]、雙向數據綁定，當輸入域的值發生改變時，{{}}里的值也發生改變
ng-bind 使用給定的變量或者表達式,代替html元素內容
ng-change 當該元素值發生改變時觸發
ng-class 給元素動態添加一個css類
ng-click 點擊后需要執行的操作
ng-disabled 設置表單的disabled屬性(true/false)
ng-focus 獲取焦點時需要執行的操作
ng-hide 表達式為true時隱藏
ng-show 表達式為true時顯示
ng-if 表達式為true時添加該元素 false時移除
ng-init 初始化一個變量
ng-submit 在表單提交后執行該函數 (form)
ng-checked 設置單、復選 為true就默認選中
ng-repeat 用于循環輸出指定次數的html元素
ng-options 在select里使用 適用于下拉框
ng-repeat-start 要配合ng-repeat-end來使用 (來頭/結尾)
ng-src 可以修改圖片路徑
ng-copy 復制
ng-cut 粘貼
ng-paste 剪切
ng-selected 下拉菜單option屬性 默認(true/false)
AngularJS 依賴注入
什么是依賴注入
wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然后成為了該客戶端狀態的一部分。
該模式分離了客戶端依賴本身行為的創建，這使得程序設計變得松耦合，并遵循了依賴反轉和單一職責原則。與服務定位器模式形成直接對比的是，它允許客戶端了解客戶端如何使用該系統找到依賴
value
factory
service
provider
constant
###value
Value 是一個簡單的 javascript 對象，用于向控制器傳遞值（配置階段）：
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
// 創建 value 對象 "defaultInput" 并傳遞數據
mainApp.value("defaultInput", 5);
...
// 將 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
###factory
factory 是一個函數用于返回值。在 service 和 controller 需要時創建。
通常我們使用 factory 函數來計算或返回值。
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
// 創建 factory "MathService" 用于兩數的乘積 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
###provider
AngularJS 中通過 provider 創建一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用于返回 value/service/factory。
// 定義一個模塊
var mainApp = angular.module("mainApp", []);
...
// 使用 provider 創建 service 定義一個方法用于計算兩數乘積
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
###constant
constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。
mainApp.constant("configParam", "constant value");
