Angular JS 基礎應用--第一篇

時間 2019-12-10

原文原文鏈接

前言javascript

　Android應用開發中，有一些功能雖然可以使用原生JS來實現，可是會比較的複雜，所以一些相應的框架應運而生了。框架相對於原生JS而言，從主觀上來講，最大的改變就是代碼大幅度的減小了。在使用上，也比較方便易懂。所以，框架一經誕生就廣受歡迎。java

　在本章，就將詳細介紹其中一種框架的使用----Angular JS。程序員

AngularJS 經過指令擴展了 HTML，且經過表達式綁定數據到 HTML。
angularJS表達式
　　一、angularJS使用雙大括號{{}}綁定表達式；用於將表達式的內容輸出到頁面中。
　　　　  表達式中能夠是文字、運算符、變量等，也能夠在表達式中進行運算輸出結果。
  　　　　 eg:<p>{{5+5+"angular"}}</p> //能夠直接使用---10angular

　　  若是angular.js 文件放在頁面的下方在頁面刷新的瞬間會看到{{}}表達式的原樣。
  　　因此使用ng-bind指令代替表達式
  　　 eg:<p ng-bind="5+5+'angular'"></p> //能夠直接使用

angularJS的經常使用指令
  　　AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
　　　　一、ng-app：聲明angularJS所管轄的區域。通常寫在body或HTML標籤上，原則上一個頁面中只寫一個
　　　　　　  eg：<body ng-app=""></body >
  　　　　二、ng-model 指令把元素值（好比輸入域的值）綁定到應用程序的變量中。
   　　　　　　eg： <input type="text" ng-model = "name" />
　　　　  使用：<div ng-bind = "name + '123'"></div>
　　　　   <div >{{name + "hahahha"}}</div>
　　　　三、ng-bind：把應用程序中的變量中的值，輸出到頁面HTML視圖中，能夠與表達式{{}}互相替換
  　　　　 eg：<div ng-bind = "name"></div> -----<div>{{name}}</div>
　　　　四、ng-init：初始化angularJS應用程序中的變量值：
　　　　　　  eg:<body ng-init = "name = 'jredu'"></body >
　　　　   應用程序初始化時，name變量就賦有初值  實現對輸入框的實時監控原生JS編程

<body ng-app=""    ng-init = "name = 'jredu'">
        <!--原生JS綁定input與div-->
        <input type="text" name="" id="input" value="" />
        <div id="div"></div>
                
    <script type="text/javascript">
        //原生JS綁定input與div
        var inputs= document.getElementById("input");
        var div = document.getElementById("div");
        inputs.onchange = function(){
            div.innerHTML = inputs.value;
        }
    </script>    
    </body  >

效果以下： Angular JS 數組

<body ng-app=""    ng-init = "name = 'jredu'">
        <!--Angular綁定input與div-->
        <input type="text" ng-model = "name" />
        <div ng-bind = "name + '123'"></div>
        
    <script src="JS/angular.js" type="text/javascript" charset="utf-8"></script>
</body>

效果圖以下： app

比較：框架

經過上述的兩個例題，相信你們都可以很是直觀的瞭解到二者之間的差別。ide

原生JS經過對DOM的操做來實現對輸入內容的監聽，相對而言比較麻煩，而且在讀取內容時，也有一些小小的bug，下面的div在讀取輸入框內容時，鼠標必須在輸入框外再點擊一下時，div纔會讀取輸入框裏面的內容。spa

可是，在使用angular JS時，div時實時的讀取輸入框裏面的內容的。這樣就比較的方便，並且，這也是用戶想要的結果。3d

另外，對編程員來講，代碼也不是少了一點半點，我想，這是全部程序員的福音吧！！！

1. Angular JS中的過濾器

1.1 基礎介紹

過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中。
   一、系統內置的過濾器
　　　　 currency 將數字格式化爲貨幣格式
   　　　　 filter            從數組項中選擇一個子集。//後接的變量名不加引號
   　　　　 orderBy  根據某個表達式排列數組。//後接的變量名加引號     順序
   　　　　lowercase 格式化字符串爲小寫。
  　　　　 uppercase 格式化字符串爲大寫。
  　　自定義過濾器的使用：
  　　　　一、ng-repeat指令
　　　　　　  <tr ng-repeat="item in classes | orderBy:'score'|filter:search|filterByName:name|filterByScore:scores">
　　　　
　　　　二、<p >{{表達式 | 過濾器名稱}}</p>

<p>{{123456|currency}}</p>
<p>{{"aBcdEf"|lowercase}}</p>
<p>{{"aBcdEf"|uppercase}}</p>

效果圖以下：

1.2ng-repeat命令

ng-repeat命令至關於for循環，通常用於表格中，能夠將目標中的數據循環遍歷進表格中，使用起來很是的方便。
案例：

//將數組中的值遍歷進表各中
<tr ng-repeat="item in classes 「>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.score}}</td>
</tr>

效果圖以下：

同時，也可使用orderBy 指令將數組中的值進行排序，例如按照年齡排序，按照成績排序，代碼以下

<tr ng-repeat="item in classes | orderBy ：‘score’「>
可是，值得注意的是，orderBy 指令進行的排序都是升序，若是想要降序排列，就得本身從新編寫代碼。這就牽扯到自定義過濾器了。

下面，咱們就一塊兒來了解下。

1.3經過實例來了解自定義過濾器的使用方法

實例：

<body ng-app="app"ng-controller="ctrl">
        
        <p>{{123456|currency}}</p>
        <p>{{"aBcdEf"|lowercase}}</p>
        <p>{{"aBcdEf"|uppercase}}</p>
        
        
        請輸入查詢關鍵字：<input type="text"ng-model="search" />
        <br/>
        請輸入姓名查詢：<input type="text"ng-model="name" /><br/>
        請輸入成績查詢：<input type="text"ng-model="scores" />
        <table width="400px"border="1">
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>成績</th>
            </tr>
            <tr ng-repeat="item in classes | orderBy:'score'|filter:search|filterByName:name|filterByScore:scores">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.score}}</td>
            </tr>
        </table>
        
        <h1>自定義過濾器</h1>
        <p>{{"我顯示不出來啦啦!"|showHello}}</p>
        <p>{{"我顯示不出來啦啦!"|reverse}}</p>
        <p>{{12345678901|hideTel:5}}</p>
        
    </body>
    <script src="JS/angular.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
          angular.module("app",[])
        .controller("ctrl",function($scope){
            $scope.classes = [
                {name:"張三",age:"18",score:90},
                {name:"子麻",age:"18",score:91},
                {name:"麻子",age:"18",score:19},
                {name:"六子",age:"18",score:95},
                {name:"換個影子",age:"18",score:93},
            ]
        })
      /*
             自定義實現根據姓名篩選數據的功能
             實例：
                請輸入查詢姓名：<input type="text"ng-model="name" />
                <tr ng-repeat="item in classes |filterByName:name">
                 
         * */
        .filter("filterByName",function(){
            return function(item,search){//classes數組   、   input裏的內容
                if(!search){
                    return item;
                }
                var arr = [];
                for(var i=0; i<item.length; i++){
                    var index = item[i].name.indexOf(search);
                    if (index >-1) {
                        arr.push(item[i]);
                    }
                }
                return arr;                
            }
        })
        /*
          自定義實現根據成績篩選數據的功能
         注意：成績是number數據類型，不能使用indexOf()方法，要將其轉爲字符串 
          
         * */
        .filter("filterByScore",function(){
            return function(item,search){                
                var arr =[];
                if(!search) return item;
                for(var i=0; i<item.length; i++){
                    item[i].score +="";//item[i].score是number數據類型，↓不能使用indexOf()方法，故將其轉爲字符串
                    var index = item[i].score.indexOf(search); 
                    if(index>-1){
                        search == item[i].score;
                        arr.push(item[i]);
                    }
                }
                return arr;
            }
        })
    </script>