媲美jQuery的JS框架——AngularJS（一）
| 前言 |
相信原生JS你們都不陌生，至於爲何說原生，是由於在JS的基礎上衍生出了不少的框架。有些框架的使用很是普遍，甚至已經達到了媲美原生的地步。在以前的文章中給你們介紹了jQuery這一介紹框架。今天，給你們介紹另外一款十分強大的JS框架——AngularJS。javascript
首先，先介紹一下什麼是AngularJS：html
| 1、AngularJS基礎指令、表達式與MVC做用域 |
要了解一門框架，先了解其最基礎的指令與表達式等是頗有必要的；一款新的框架，其用法與指令都與原生不太相同，相似於學習一門新的語言；事實也是如此。java
1.1AngularJS的指令與表達式
AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。
一、AngularJS表達式
AngularJS使用{{}}綁定表達式。用於將表達式的內容輸出到頁面中。
表達式中能夠是文字、運算符、變量等，也能夠在表達式中進行運算輸出結果。
舉個栗子：ajax
1 <p>{{5+5+"Angular"}}</p>
若是Angular.js文件放在頁面下方，在頁面刷新的瞬間會看到{{}}表達式的原樣，因此，可使用ng-bind指令替表明達式；
再舉個栗子：數據庫
1 <p ng-bind="5+5+'Angular'"></p>
二、AngularJS的指令
AngularJS 指令是拓展的HTML屬性，帶有前綴ng-。
（1）ng-app：聲明AngularJS所管轄的區域。通常寫在body或html標籤上，原則上一個頁面只能有一個。畢竟在一個HTML文件中，body和HTML只有
再舉個栗子：數組
1 <body ng-app=""></body>
（2）ng-model：指令把元素的值(好比輸入域的值)綁定到應用程序的變量中。
eg：<input type="text" ng-model="name">
（3）ng-bind：把應用程序變量中的值，輸入到HTML的視圖中。能夠與表達式{{}}互相替換。服務器
再再舉個栗子：AngularJS綁定input和div；架構
1 <body ng-app=""> 2 <input type="text" ng-model="name"> 3 <div>{{name}}</div> 4 <div ng-bind="name"></div> 5 </body>
固然，JS也能夠進行數據的綁定：app
1 <body > 2 <input type="text" id="input"/> 3 <div id="div"></div> 4 <script type="text/javascript"> 5 var inputs = document.getElementById("input"); 6 var div = document.getElementById("div"); 7 inputs.onchange = function(){ 8 div.innerHTML = inputs.value; 9 } 10 </script> 11 </body>
四、ng-init ：指令初始化AngularJS應用程序數據中的變量值；
<body ng-app="" ng-init="haha"></body>
應用程序初始化時，name變量就附有初值；框架
1.2MVC與做用域
首先，先給你們解釋一下什麼是MVC：MVC三層架構，M——Model(模型層）；V—— View(視圖層)；C——Controller(控制器)；
Model(模型層)：應用程序中用於處理數據的部分。(包括將數據保存或者修改到數據庫、變量、文件中)。在AngularJS中，Model特指的是：應用程序中的各類數據
View(視圖層)：用戶能夠看到的用戶顯示數據的頁面。
Controller(控制器)：控制器是連接View與Model的橋樑。
負責從View讀取數據，接受用戶的交互輸入；並將數據發送給Model層。Model層對數據處理完畢以後，將結果返回給Controller，Controller再講結果返回給View層顯示；
因此，咱們能夠畫出一個結構圖：
→ View → (數據) → Controller →(數據) →
↗ ↘
用戶 Model(處理數據)
↖ ↙
← View ← (數據) ← Controller ← (數據) ←
而後，在瞭解做用域以前，先明白AngularJS中的【模塊開發】與【依賴注入】；
在AngularJS中，一般須要建立一個Angular的模塊。即ng-app=""所須要綁定的部分。
須要接受兩個參數：
①模塊名稱，即ng-app雙引號中須要綁定的名字。<body ng-app="myApp"></body>
②數組。表示須要注入的模塊名稱，不須要注入其餘模塊可用空數組代替。
>>>Angular將經常使用的功能封裝到angular.js，建立主模塊是直接可使用，無須注入。
>>>而一些應用較少的功能，須要導入對應的js文件，而且在[]中注入這個模塊，纔可以使用。
這就是AngularJS中的【模塊開發】與【依賴注入】！
而後再瘋狂的舉個栗子：
在AngularJS的模塊上，建立一個控制器，須要傳遞兩個參數：
①控制器名稱，即ng-controller="myCtrl"須要綁定的名稱。
<div ng-controller="myCtrl">
②控制器的構造函數，構造函數能夠傳入多個參數。
>>>若是要在函數中使用系統的內置對象，則必須經過函數的參數傳入，不然不能使用。
>>>AngularJS的內置對象，都用$開頭,例如$scope,$rootScope。
1 <body ng-app="myApp"> 2 3 <input type="text"ng-model="age" /> 4 5 <div ng-controller="myCtrl"> 6 <input type="text"ng-model="name" /> 7 <div ng-bind="name"></div> 8 <div ng-bind="age"></div> 9 10 </div> 11 <div ng-bind="age + '這是myCtrl外的div'"></div> 12 13 </body> 14 <script type="text/javascript"src="js/angular.js"></script> 15 16 17 <script type="text/javascript"> 18 var app=angular.module("myApp",[]); 19 app.controller("myCtrl",function($scope,$rootScope){ 20 $scope.name = "zhangsan"; 21 $rootScope.age = "14"; 22 }); 23 </script> 24
結果：
從栗子的結果，咱們能夠看出：
$scope:局部做用域，聲明在$scope上的屬性和方法。只能在當前Controller使用；
$rootScope:全局做用域，根做用域。聲明在$rootScope上的屬性和方法，能夠在整個ng-app所包含的範圍使用。
>>>若是沒有使用$scope聲明變量，而是直接使用ng-model在HTML標籤中綁定數據的做用域爲：
一、若是ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的$scope中，
二、若是ng-model沒有寫在任何Controller中，則這個變量會默認綁定到$rootScope上；
>>>AngularJS的父子做用域！
一、AngularJS中，子做用域只能訪問父做用域中的變量，而不能修改父做用域中的變量；
二、爲了解決上述問題，能夠將父做用域中的變量聲明爲引用數據類型，例如對象等。這樣能夠在子做用域中，直接修
改對象的屬性，而不須要修改對象自己保存的地址。
| 2、AngularJS中的過濾器 |
AngularJS中提供了內置的過濾器，可是，AngularJS也提供了自定義的過濾器；
2.1內置過濾器
首先，先說明一下啥子是過濾器：
AngularJS中的過濾器其實很簡單的結構，最主要的局勢管道字符：（|）；
過濾器可使用一個管道字符（|）添加到表達式和指令中。
在系統中有着內置的過濾器：
currency：格式化數字爲貨幣格式。
舉個栗子：
1 <body ng-app="app"ng-controller="ctrl"> 2 <p>{{123456|currency}}</p> 3 </body>
lowercase 格式化字符串爲小寫。
uppercase 格式化字符串爲大寫。
再舉個栗子：
1 <body ng-app="app"ng-controller="ctrl"> 2 <p>{{"aNcDeF"|lowercase}}</p> 3 <p>{{"aNcDeF"|uppercase}}</p> 4 </body>
orderBy 根據某個表達式排列數組。
filter 從數組項中選擇一個子集。
讓咱們把上面兩個過濾器結合起來，而後，再再再舉個栗子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>AngularJS中的過濾器</title> 6 </head> 7 8 9 10 <body ng-app="app"ng-controller="ctrl"> 11 12 請輸入查詢的關鍵字：<input type="text" ng-model="search" /> 13 請輸入姓名：<input type="text" ng-model="name" /> 14 <table width="400px"border="1"style="border-collapse: collapse;"> 15 <tr> 16 <th>姓名</th> 17 <th>年齡</th> 18 <th>成績</th> 19 20 </tr> 21 <tr ng-repeat="item in classes|orderBy:'score'|filter:search|find:name"> 22 <td>{{item.name}}</td> 23 <td>{{item.age}}</td> 24 <td>{{item.score}}</td> 25 26 </tr> 27 28 </table> 29 30 </body> 31 32 33 34 <script type="text/javascript" src="js/angular.js"></script> 35 <script type="text/javascript"> 36 angular.module("app",[]).controller("ctrl",function($scope){ 37 $scope.classes = [ 38 {name:"張三",age:12,score:98}, 39 {name:"李四",age:16,score:78}, 40 {name:"王二麻子",age:17,score:88}, 41 {name:"趙武",age:15,score:58}, 42 {name:"李胖",age:19,score:38}, 43 44 ] 45 46 47 }) 48 .filter("find",function(){ 49 return function(item,search){ 50 if(!search) return item; 51 var arr = []; 52 for (var i=0;i<item.length;i++) { 53 var index = item[i].name.indexOf(search); 54 if(index>-1) { 55 arr.push(item[i]); 56 } 57 58 } 59 return arr; 60 } 61 }) 62 </script> 63 </html>
結果：
2.2自定義過濾器
自定義過濾器，同時須要傳遞過濾參數。
再次瘋狂的舉栗子：<p>{{12345678912 | hideTel:5}}</p>
傳入的參數5，將被過濾函數的num形參所接受
1 <body ng-app="app"ng-controller="ctrl"> 2 <p>{{12345678912|hidenTel}}</p> 3 </body> 4 <script type="text/javascript" src="js/angular.js"></script> 5 <script type="text/javascript"> 6 7 .filter("hidenTel",function(){ 8 return function(text,num){ 9 num=num>0&&num<11?num:3; 10 text=text+""; //將text變成字符串格式 11 var newText=text.substring(0,11-num)+text.substring(11-num,11).replace(/\d/g,"*") 12 return newText; 13 } 14 }) 15 16 </script>
結果：
| 3、AngularJS中的服務 |
AngularJS中的服務分爲三種：服務Service；自定義服務Factory；自定義服務provider；
3.1服務Service
AngularJS中不只提供了內置服務，相同的，也提供了自定義服務的功能；
一、內置服務：
須要注意的是：要使用服務，必須把服務名經過controller的構造函數的參數注入進來！！！
系統內置的服務，同一使用$開頭，服務中的屬性和方法統一使用$$開頭！！自定義服務時，須要與系統服務的寫法分開；
$location:返回當前頁面的url地址信息，是一個對象；
$http:向服務器發送請求，相似於jQuery中的ajax；
$timeout:至關於setTimeout();
$interval :至關於setInterval();
1 <body ng-app="app" ng-controller="ctrl"> 2 3 <p>{{time}}</p> 4 <p>{{num}}</p> 5 6 </body> 7 <script type="text/javascript" src="js/angular.js"></script> 8 <script type="text/javascript"> 9 angular.module("app",[]) 10 .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){ 11 // $scope.local = $location; 12 $timeout(function(){ 13 $scope.time = "hahaha" 14 },2000) 15 16 $scope.num= 0; 17 $interval(function(){ 18 $scope.num++; 19 20 21 },1000) 22 }) 23 </script>
二、自定義服務
第一個參數是是服務名；
第二個參數是自定義服務的構造函數。咱們自定義的服務，本質是一個對象。
對象的屬性，能夠在構造函數中，使用this.屬性 表示；
對象的方法，能夠在構造函數中，使用this.方法 表示；
再舉個栗子：實現十進制轉十六進制
1 <body ng-app="app" ng-controller="ctrl"> 2 3 4 <h2>{{gongneng}}</h2> 5 <p>10轉化爲16進制後，結果爲：{{num1}}</p> 6 7 </body> 8 9 <script type="text/javascript" src="js/angular.js"></script> 10 <script type="text/javascript"> 11 angular.module("app",[]) 12 .controller("ctrl",function($scope,hexafy){ 13 $scope.gongneng = hexafy.gongneng; 14 $scope.num1 = hexafy.func(10); 15 }) 16 .service("hexafy",function(){ 17 this.gongneng = "將十進制數轉化爲16進制"; 18 this.func = function(num){ 19 return num.toString(16); 20 } 21 }) 22 </script>
3.2自定義服務Factory
factory服務在使用上與service服務沒有太大差距。
惟一的不一樣點，是聲明服務時，factory服務是函數中先聲明好一個對象，而後使用return將對象返回；
而service服務，則是直接在函數中，則是直接使用this將屬性和方法添加到對象上面。
舉例：
1 <body ng-app="app" ng-controller="ctrl"> 2 3 <h1>{{gongneng}}</h1> 4 <p>{{num1}}</p> 5 </body> 6 7 <script type="text/javascript" src="js/angular.js"></script> 8 <script type="text/javascript"> 9 angular.module("app",[]) 10 .controller("ctrl",function($scope,hexafy){ 11 $scope.gongneng = hexafy.gongneng; 12 $scope.num1 = hexafy.func(10); 13 }) 14 15 .factory("hexafy",function(){ 16 var obj = { 17 gongneng : "十進制轉換爲16進制", 18 func : function(num){ 19 return num.toString(16); 20 } 21 } 22 return obj; 23 }) 24 25 </script>
結果：
3.3自定義服務provider
一、在AngularJS中，service服務、factory服務都是基於provider服務實現的；
二、在定義provider時，可使用get方法，接受一個函數，函數裏面採用和factory徹底相同的寫法；
1 .provider("hexafy",function(){ 2 this.$get = function(){ 3 var obj = { 4 gongneng : "222" 5 } 6 return obj; 7 } 8 })
三、在三種服務中，provider服務是惟一一個能夠寫進config配置階段的服務。
因此說，若是服務須要在配置階段，也就是聲明controller以前執行的話，則可使用provider。不然通常使用service或者factory;
在配置階段使用服務，一般須要使用config在聲明controller以前執行。能夠用於聲明一些在controller中須要使用的全局變量、方法、服務等。。
舉例：
1 <body ng-app="app" ng-controller="ctrl"> 2 <h1 ng-bind="gongneng"></h1> 3 </body> 4 5 <script type="text/javascript" src="js/angular.js"></script> 6 <script type="text/javascript"> 7 angular.module("app",[]) 8 .config(function($provide){ 9 //在配置階段聲明一個provider服務，須要在config中注入系統對象$provide; 10 $provide.provider("hexafy",function(){ 11 this.$get = function(){ 12 var obj = { 13 gongneng : "444" 14 } 15 return obj; 16 } 17 }) 18 }) 19 </script>
再舉個栗子，此次是常規的provider：
1 <body ng-app="app" ng-controller="ctrl"> 2 3 <!--<h1>{{gongneng}}</h1>--> 4 <h1 ng-bind="gongneng"></h1> 5 </body> 6 7 <script type="text/javascript" src="js/angular.js"></script> 8 <script type="text/javascript"> 9 10 angular.module("app",[]) 11 12 .controller("ctrl",function($scope,hexafy){ 13 $scope.gongneng = hexafy.gongneng; 14 }) 15 .provider("hexafy",function(){ 16 this.$get = function(){ 17 var obj = { 18 gongneng : "222" 19 } 20 return obj; 21 } 22 }) 23 </script>
結果：
| 編者按 |
此次小編就先說到着，要知道每一款框架都包含着大量的知識點；要知道，除了以上這些，還有AngularJS的$http、DOM事件、動畫、表格驗證和路由等基礎；其於小編會盡快將後續知識發佈出來。敬請期待有。
- 1. 媲美jQuery的JS框架----AngularJS（二）
- 2. JS框架~Angularjs
- 3. Riot.js——一個小而美的JS框架
- 4. JS我選擇jQuery框架
- 5. AngularJS - 下一個大框架
- 6. JS 框架比較：AngularJS vs ReactJS vs EmberJS
- 7. AngularJS 框架
- 8. 一款優秀的前端JS框架—AngularJS
- 9. 一款優秀的前端框架——AngularJS
- 10. 一款優秀的JavaScript框架—AngularJS
- 更多相關文章...
- • Hibernate的一級緩存 - Hibernate教程
- • Docker 架構 - Docker教程
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。