閱讀目錄
2 指令
3 控制器
4 過濾器
5 http
6 表格
7 html dom
懷着激動與忐忑的心情，開始了學習AngularJS的旅程，很久之前就聽說了這個前端框架，但是由於自己一直沒有從事相關的工作，因此也沒有進行學習。這次正好學習AngularJS，直接複習一下前端的知識。目前這裏還是弱點，慢慢深入的學習。
AngularJS是Google的優秀的前端框架，目前已經應用於多個產品。
通過w3cschool.cc的學習，簡單的瞭解了下它的使用方法，但是對於原理還沒有理解。
AngularJs相對於其他的框架來說，有一下的特性：
1 MVVM
2 模塊化
3 自動化雙向數據綁定
4 語義化標籤
5 依賴注入
由於很多概念都不瞭解，這些特性也無法理解。以後會通過學習，慢慢深入研究。
通過簡單的學習，大致瞭解了AngularJS的語法以及使用，包括如下的內容：
1 表達式
支持普通的JS表達式，表達式通過{{}}使用。
<div ng-app="">
<p>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
2 指令
通過特定的標籤指定，完成數據的綁定以及定義，抓取
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你輸入的爲： {{ firstName }}</p>
</div>ng-app 定義AngularJS的應用程序
ng-init 初始化應用程序變量
ng-model 獲取程序變量
ng-bind 綁定數據變量
3 控制器
通過控制器，控制應用程序。通過構造函數，完成方法以及變量的創建。
其中personController相當於構造方法函數，參數$scope代替指定的元素標籤。
<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br>
<br>姓名： {{person.firstName + " " + person.lastName}}</div>
<script>function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}</script>4 過濾器
通過過濾器，完成特定的排序或者過濾，大小寫轉換等等。
currency 數字轉化成貨幣格式
<div ng-app="" ng-controller="costController">數量：<input type="number" ng-model="quantity">價格：<input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>filter 從數據項中選定一個子集
<div ng-app="" ng-controller="namesController">
<p>輸入過濾:</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }} </li>
</ul>
</div>orderBy 排序
<div ng-app="" ng-controller="namesController">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }} </li>
</ul>
<div>lowercase uppercase 大小寫轉換
<div ng-app="" ng-controller="personController">
<p>姓名爲 {{ person.lastName | uppercase }}</p>
</div>
5 http
通過http獲取指定的文件內容
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }} </li>
</ul>
</div>
<script>function customersController($scope,$http) { $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}</script>
6 表格
通過ng-repeat實現表格展現
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
7 html dom
通過DOM元素的屬性，控制節點。例如：ng-disabled ng-show
<div ng-app=""> <p> <button ng-disabled="mySwitch">點我！</button> </p> <p> <input type="checkbox" ng-model="mySwitch">按鈕</p> </div>
以上就是簡單的學習內容，明天計劃學習下w3cshcool.cc的後續內容