俗話說“好記性不如爛筆頭”，編程的海洋如此的浩大，養成做筆記的習慣是成功的一步！
此筆記主要是angularjs1.6.2版本的筆記，並且筆記都是博主自己一字一字編寫和記錄，有錯誤的地方歡迎大家指正。
一、基礎知識：
1、angularjs 是一個 JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁面。angularjs 通過 指令 擴展了 HTML，且通過
表達式 綁定數據到 HTML。它誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購，已經被用於Google的多款產品中。
angularjs有諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等。
官方網站： https://angularjs.org/
入門教程推薦網址：http://www.runoob.com/angularjs/angularjs-tutorial.html
備註：
bootstrap的入門教程推薦網址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
2、angularjs 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
(1) 把應用程序數據綁定到 HTML 元素。
(2) 可以克隆和重複 HTML 元素。
(3) 可以隱藏和顯示 HTML 元素。
(4) 可以在 HTML 元素"背後"添加代碼。
(5) 支持輸入驗證。
3、angularjs 主要特色是通過指令的形式擴展html，使得html標籤擁有更多強悍的功能。
示例代碼如下：
<div ng-app="">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
輸入的名字爲：{{name}}
</div>
</div>
其中屬性 ng-app、ng-model等都是angularjs的指令。
4、常用的指令：
ng-app:
指定應用名稱。
ng-controller：指定控制器名稱。
ng-init：初始化指令，通常可用於聲明變量，或者指定初始值。
ng-model：模型綁定，用於綁定某個某個變量。
ng-bind：變量綁定，相當於讀取變量數據。
ng-show：是否顯示當前元素。true表示顯示，false表示隱藏。
ng-hide：是否隱藏當前元素。與ng-show相反，true表示隱藏，false表示顯示。
ng-class：與ng-model配合使用，讀取ng-model的value作爲class屬性值。
ng-repeat：讀取屬性值的循環變量，然後循環添加當前元素到頁面。
ng-options：讀取屬性值的循環變量，並循環創建option元素到當前元素內。
ng-if：條件判斷。爲true時顯示當前元素，否則不顯示。通常在循環中配合$odd和$even對象。
ng-disabled： 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。
ng-click：指令定義了 AngularJS 點擊事件。
5、angularjs的模塊，相當於是一個容器，所有自定義的變量、控制器、服務、過濾器等，都是隻在此模塊中有效，從而不影響其他的模塊。
6、angularjs還擴展了其他模塊，根據需要引入擴展模塊的js，例如想實現動畫需要引入angular-animate.js，
想實現路由的功能則引入angular-route.js
二、使用筆記：
1、angularjs主要分爲幾個功能模塊：
（1）指令：AngularJS 指令是以 ng 作爲前綴的 HTML 屬性。
例如：
<div ng-app="" ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
（2）表達式：AngularJS 表達式寫在雙大括號內：{{ expression }}。
例如：
<div ng-app="">
<p>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
（3）應用：AngularJS 模塊（Module） 定義了 AngularJS 應用。
控制器（Controller） 用於控制 AngularJS 應用。
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>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
2、AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
例如：ng-app="" 寫法等於 data-ng-app=""
3、自定義指令：
除了 AngularJS 內置的指令外，我們還可以創建自定義指令。
你可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峯法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive。
例如:
<body ng-app="myApp">
<!--使用元素名調用指令-->
<runoob-directive></runoob-directive>
<!--使用屬性來調用指令-->
<div runoob-directive></div>
<!--使用類名來調用指令-->
<div class="runoob-directive"></div>
<!--使用註釋來調用指令，注意directive:是固定格式-->
<!-- directive:run-dir -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
//設置可調用指令的方式，默認只可以通過元素名和屬性調用。
restrict : "EACM",
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
4、scope 作用域是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
AngularJS 應用組成如下：
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
而scope 是模型，所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<div ng-app="myApp" ng-controller="myCtrl">
<!--在html元素中，直接使用作用域的屬性即可，不需要加入$scope前綴引用-->
<h1>{{lastname}} 家族成員:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
//注意參數名字，angularjs框架底層是根據參數名判斷的，而不是參數的順序。
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
5、angularjs的過濾器：可以使用一個管道字符 | 添加到表達式和指令中。
(1)系統自帶的過濾器：
currency
格式化數字爲貨幣格式。
filter
從數組項中選擇一個子集。
lowercase
格式化字符串爲小寫。
orderBy
根據某個表達式排列數組。
uppercase
格式化字符串爲大寫。
例如：
<div ng-app="mymod" ng-controller="mycrl">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
<!--uppercase就是過濾器，通過|來調用-->
輸入的大些名字爲：{{name | uppercase}}
</div>
</div>
(2)自定義過濾器：
var mymod = angular.module("mymod",[]);
//myformat是過濾器名稱，後面的函數裏再返回函數對象，返回的函數對象就是格式化需要調用的對象
//返回函數的第一個參數是格式化的數據，後面參數是格式化時傳入的參數。
mymod.filter("myformat", function() {
return function(input, isUppercase) {
var out = "fm:" + input
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
});
使用方式：
<div ng-app="mymod" ng-controller="mycrl">
<p>
名字：<input type="text" ng-model="name" />
</p>
<div>
<!--myformat就是過濾器，true就是格式化時傳入的參數-->
輸入的大些名字爲：{{name | myformat:true}}
</div>
</div>
6、angularjs的服務：
(1)服務是一個函數或對象，可在你的 AngularJS 應用中使用，AngularJS 內建了30 多個服務，
比較常用的服務有：$location、$http、$timeout、$interval等。
使用例子：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
//使用服務時，必須先在函數參數中說明服務
$scope.myUrl = $location.absUrl();
});
(2)自定義服務：
mymod.service("myser", function() {
this.addSerFlag = function (arg) {
return "myser:" + arg
}
})
使用方式：
var mymod = angular.module("mymod",[]);
//在controller控制器中使用自定義的服務。
mymod.controller("mycrl", function($rootScope, myser){
$rootScope.name = myser.addSerFlag("李四abc")
});
//在自定義的過濾器中使用自定義的服務。
mymod.filter("myformat", ["myser", function(myser) {
return function(input,isUppercase) {
var out = myser.addSerFlag("fm:" + input)
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
}]);
7、事件綁定：
<div ng-app="myApp" ng-controller="myCtrl">
<!--點擊事件可以不是函數，直接進行簡單的運算操作-->
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
<!--點擊事件綁定函數-->
<button ng-click="fun()">彈框</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//定義元素
$scope.count = 0;
$scope.fun = function () {
alert($scope.count);
}
});
</script>
8、表單校驗：
angular對錶單校驗也有支持，表單校驗有幾個常用的屬性：
屬性 描述
$dirty
表單有填寫記錄
$valid
字段內容合法的
$invalid
字段內容是非法的
$pristine
表單沒有填寫記錄
使用表單校驗是，必須通過form的name來做綁定個子元素的name，例如myForm.myEmail
例子：
<form name="myForm" novalidate >
郵箱：<input name="myEmail" ng-model="myEmail" required type="email"/>
<span style="color: red;" ng-show="myForm.myEmail.$dirty && myForm.myEmail.$invalid">
<span ng-show="myForm.myEmail.$error.required">這郵箱是必須的</span>
<span ng-show="myForm.myEmail.$error.email">這郵箱是非法的</span>
</span>
</form>
9、使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內容，ng-include 指令除了可以包含 HTML 文件外，
還可以包含 AngularJS 代碼。
默認情況下， ng-include 指令不允許包含其他域名的文件。如果你需要包含其他域名的文件，你需要設置域名訪問白名單：
例子：
<body ng-app="myApp">
<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
//設置跨域白名單
$sceDelegateProvider.resourceUrlWhitelist([
'http://c.runoob.com/runoobtest/**'
]);
});
</script>
</body>
三、附加：
1、angularjs框架擁有許多實用的工具方法，常用的工具方法用：
'bootstrap': bootstrap,
'copy': copy,
'extend': extend,
'merge': merge,
'equals': equals,
'element': jqLite,
'forEach': forEach,
'injector': createInjector,
'noop': noop,
'bind': bind,
'toJson': toJson,
'fromJson': fromJson,
'identity': identity,
'isUndefined': isUndefined,
'isDefined': isDefined,
'isString': isString,
'isFunction': isFunction,
'isObject': isObject,
'isNumber': isNumber,
'isElement': isElement,
'isArray': isArray,
'version': version,
'isDate': isDate,
'lowercase': lowercase,
'uppercase': uppercase,
'callbacks': {$$counter: 0},
'getTestability': getTestability,
'reloadWithDebugInfo': reloadWithDebugInfo,
'$$minErr': minErr,
'$$csp': csp,
'$$encodeUriSegment': encodeUriSegment,
'$$encodeUriQuery': encodeUriQuery,
'$$stringify': stringify
用法：angular.copy(arg); //angular是框架定義的window屬性（全局變量），所有工具類的使用都是通過藉助該變量來引用。
