【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的後續內容

【AngularJS】—— 1 初識AngularJs