媲美jQuery的JS框架——AngularJS（一）

本文轉載自查看原文 2017-10-15 17:45 2290

前言

相信原生JS大家都不陌生，至於為什么說原生，是因為在JS的基礎上衍生出了很多的框架。有些框架的使用非常廣泛，甚至已經達到了媲美原生的地步。在之前的文章中給大家介紹了jQuery這一介紹框架。今天，給大家介紹另一款十分強大的JS框架——AngularJS。

首先，先介紹一下什么是AngularJS：

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可通過 <script> 標簽添加到 HTML 頁面。

AngularJS 還可以通過指令擴展了 HTML，且通過 表達式 綁定數據到 HTML。

AngularJS 是以一個 JavaScript 文件形式發布的，可通過 script 標簽添加到網頁中。

AngularJS有着諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。

一、AngularJS基礎指令、表達式與MVC作用域

要了解一門框架，先了解其最基礎的指令與表達式等是很有必要的；一款新的框架，其用法與指令都與原生不太相同，類似於學習一門新的語言；事實也是如此。

1.1AngularJS的指令與表達式

AngularJS 通過指令擴展了 HTML，且通過表達式綁定數據到 HTML。

   1、AngularJS表達式
   AngularJS使用{{}}綁定表達式。用於將表達式的內容輸出到頁面中。
   表達式中可以是文字、運算符、變量等，也可以在表達式中進行運算輸出結果。
   舉個栗子：

1 <p>{{5+5+"Angular"}}</p>

   如果Angular.js文件放在頁面下方，在頁面刷新的瞬間會看到{{}}表達式的原樣，所以，可以使用ng-bind指令替代表達式；
   再舉個栗子：

1 <p ng-bind="5+5+'Angular'"></p>

   2、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也可以進行數據的綁定：

 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>

   4、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標簽中綁定數據的作用域為：
  1、如果ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的$scope中，
  2、如果ng-model沒有寫在任何Controller中，則這個變量會默認綁定到$rootScope上；

  >>>AngularJS的父子作用域！
  1、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>

結果：

三、AngularJS中的服務

AngularJS中的服務分為三種：服務Service；自定義服務Factory；自定義服務provider；

3.1服務Service

AngularJS中不僅提供了內置服務，相同的，也提供了自定義服務的功能；

1、內置服務：
需要注意的是：要使用服務，必須把服務名通過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>

2、自定義服務
    第一個參數是是服務名；
    第二個參數是自定義服務的構造函數。我們自定義的服務，本質是一個對象。
    對象的屬性，可以在構造函數中，使用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

  1、在AngularJS中，service服務、factory服務都是基於provider服務實現的；
   2、在定義provider時，可以使用get方法，接受一個函數，函數里面采用和factory完全相同的寫法；

1  .provider("hexafy",function(){
2    this.$get = function(){
3     var obj = {
4      gongneng : "222"
5     }
6     return obj;
7    }
8   })

3、在三種服務中，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事件、動畫、表格驗證和路由等基礎；其於小編會盡快將后續知識發布出來。敬請期待有。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 媲美jQuery的JS框架----AngularJS（二）關於angularjS與jQuery框架的那些事 JS框架~Angularjs 一個非常好用的前端JS框架-AngularJS(一) 一款優秀的前端JS框架—AngularJS 前端三大框架 Vue.js、AngularJS、React 的區別 js框架封裝，模擬jQuery封裝 jQuery Validate驗證框架詳解(jquery.validate.min.js) AngularJS框架研究（一） angularJS和jQuery的區別