【AngularJS】—— 1 初識AngularJs

　　懷着激動與忐忑的心情，開始了學習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的後續內容