您现在的位置： Linux教程網 >> UnixLinux > >> Linux編程 >> Linux編程

AngularJS 初步認識

代碼稍多，請自行打開

一、前言

早已聽說AngularJS的大名，並在很久前也編寫過些小demo，但是都沒有系統學習過。由於，在下個版本項目中用到了AngularJS，so，那就一起再來研究研究呗。

說到，這個AngularJS，其核心就是對HTML標簽的增強。

何為HTML標簽增強？

其實就是使你能夠用標簽完成一部分頁面邏輯，具體方式就是通過自定義標簽、自定義屬性等，這些HTML原生沒有的標簽/屬性在ng中有一個名字：指令（directive）。

至於說AngularJS是MVC，亦或MVVM框架？

都不是，它是MVW，最後的W意思就是說whatever，固有些人也稱其為MV*。其中含義，以後實踐久了，應該就豁然開朗了，至於現在，move on吧。

二、一切從hello world開始

啊，蒼茫的天涯是我的愛，綿綿的青山腳下花會開，什麼樣的節奏是最呀最搖擺，什麼樣的歌聲才是最開懷~~~

現在這個年代，人非草木，什麼都得有情懷，不然還混不下去了。所以，接下來我們編寫個小demo，來抒發我們的抱負。

這個demo要實現的功能很簡單，就是在input框中，輸入自定義內容，如hello world，間接改變另一顯示區域。

前提：如若沒有angular.js文件，請點擊這裡（here）。

實現代碼如下：

<!DOCTYPE html>
<head>
<metacharset="utf-8"/>
<scriptsrc="angular.js"></script>
</head>
<bodyng-app>
<inputtype="text" ng-model="custom"/>
<h1>{{custom}}</h1>
</body>
</html>

效果圖：

怎麼樣，是八是很驚奇，僅僅用了這幾行代碼，就實現了這個效果，倘若利用原生代碼實現，我們還得監聽input框，值若改變，取值，將其動態插入h1中。

啧啧啧，相對於AngularJS顯得稍稍笨重了許多，所以這也體現了AngularJS的優點，適合數據操作多的應用。

在“前言”中，我們已經提到，AngularJS其核心就是對HTML標簽的增強，且內置的Angular指令是以ng-開頭的，如上述代碼中的ng-app以及ng-model。

　　--ng-app指令聲明所有被其包含的內容都屬於angularjs應用

　　--ng-model指令將內部$scope的屬性名綁定到input框中，從而實現雙向綁定。

好了，倘若我想給上述input框一個默認值 ’hello world’ 呢？在value=’hello world’？

噗，No。因為我們在body已用ng-app指令表示在body中都屬於angular應用啦，so

<input type='text' ng-model='custom' value='hello world'/>

是不起作用滴，不過可以利用angular內置指令ng-init來達到我們想要的效果。

代碼如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app>
        <input type="text" ng-model="custom" ng-init="custom='hello world'"/>
        <h1>{{custom}}</h1>
    </body>
</html>

除開這種便捷的方法，我們還可以利用控制器來實現同樣的效果。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app>
        <input type="text" ng-model="custom" ng-controller="customController"/>
        <h1>{{custom}}</h1>
        <script>
            function customController($scope){
                $scope.custom = 'hello world';
            }
        </script>
    </body>
</html>

效果圖如下：

尼瑪，怎麼不是我們想要的效果？！！

細看代碼，發現，我們將控制器customController寫在input中的，固出現上述狀況。

你可能會問，這是為什麼呢？-.-小沈陽附體

因為諸如ng-app、ng-controller這些標簽，他們都會創建一個作用域，這個作用域呢，又是以html標簽來劃分的。如<body ng-app>，那麼它所創建的作用域（$rootScope），就是在body中生效，即</body>止。如上述代碼，我們將控制器customController寫在input中，那麼這個子作用域就是在input中，<h1>標簽中的{{custom}}是獲取不到的。

好了，了解了原因，我們修改上述代碼，如下，將customController控制器放到body中，即可。

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app ng-controller="customController">
        <input type="text" ng-model="custom"/>
        <h1>{{custom}}</h1>
        <script>
            function customController($scope){
                $scope.custom = 'hello world';
            }
        </script>
    </body>
</html>

完美！

咦，函數customController中參數$scope什麼鬼，我們調用時並沒有傳入呢。這就涉及到Angular的另一核心特效依賴注入，我們現在先不管他內部原理如何實現的，大概過程就是將預定義好的對象名與具體操作綁定，我們使用時，在參數中調用即可，且注入名字必須與預定義的對象一樣，不然會報錯。另，$scope對象屬於Angular內置對象，代表對應的作用域管理對象。

上述代碼中，再細細看來，還是不好呢。我們將控制器寫在了全局對象中，雖然不影響代碼運行，但不易於維護嘛，好在Angular允許我們使用angular.module方法來聲明模塊。

該方法接收兩個參數，第一個是模塊的名稱，第二個是依賴列表。利用angular.module修改上述代碼，得下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app='myApp' ng-controller="customController">
        <input type="text" ng-model="custom"/>
        <h1>{{custom}}</h1>
        <script>
            var myApp = angular.module('myApp', []);
            myApp.controller('customController', function($scope){
                $scope.custom = 'hello world';
            });
        </script>
    </body>
</html>

效果圖如下：

三、scope作用域

AngularJS 應用啟動並生成視圖時,會將根 ng-app 元素與 $rootScope 進行綁定，$rootScope 是所有 $scope 的最上層對象,可以理解為一個 AngularJS 應用中的全局作用域對象,所以為它附加太多邏輯或者變量並不是一個好主意,和污染 Javascript 全局作用域是一樣的。通過諸如控制器、指令等這些命令，我們可以創建子作用域，所有的子作用域都通過原型繼承而來（指令的孤立作用域除外），也就是說它們都可以訪問父級作用域。

好了，我們通過編寫個demo感受一番：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app='myApp'>
        rootScope:{{name}}
        <div ng-controller="outterController">
            outter:{{name}}
            <div ng-controller="innerController">
                inner:{{name}}
            </div>            
        </div>
        <script>
            var myApp = angular.module('myApp', []);
            myApp.run(function($rootScope){
                $rootScope.name = 'rootScope';    
            }).controller('outterController', function($scope, $timeout){
                $timeout(function(){
                    $scope.name = 'outter';
                }, 1000);
            }).controller('innerController', function($scope, $timeout){
                $timeout(function(){
                    $scope.name = 'inner';
                }, 2000);
            });
        </script>
    </body>
</html>

代碼稍多，請自行打開

效果圖如下：

四、過濾器

Angular過濾器用來格式化需要展示給用戶的數據，通過 | 符號來達到過濾效果。

假設我們需要在將一個數字過濾，讓他保留兩位小數，可以這麼做：

{{124.567 | number:2}}//124.57

{{124 | number:2}}//124.00

並且，我們可以使用多個filter連用，上一個filter的輸出結果將作為下一個filter的輸入，如：

{{ expression | filter1 | filter2| … }}

上述代碼中的number為Angular的內置過濾器。如果我們需要傳遞參數給過濾器，只要在過濾器名字後面加冒號即可。如果有多個參數，可以在每個參數後面都加入冒號。

Angular內置的過濾器有：currency（貨幣）、date（日期）、filter（子串匹配）、json（格式化json對象）、limitTo（限制個數）、lowercase（小寫）、uppercase（大寫）、number（數字）、orderBy（排序），總共九種，除此之外還可以自定義過濾器，這樣，我們就可以滿足任何要求的數據處理啦。

下面先列舉幾個常用的內置過濾器，拋磚引玉，大家一同感受下。

1、 filter

filter過濾器可以從給定數組中選擇一個子集，並將其生成一個新數組返回。這個過濾器通常用來過濾需要進行展示的元素。該過濾器有兩個參數，第一個參數可以是字符串、對象或是一個用來從數組中選擇元素的函數。下面一一介紹：

--字符串--

返回所有包含這個字符串的元素。如果我們想返回不包含該字符串的元素，在參數前面加！符號即可。

如下：

{{['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'!e'}}

--對象--

AngularJS會將待過濾對象的屬性同這個對象中的屬性名進行一一比較，如果過濾對象的屬性包含這個屬性名，則出現在新的數組中並返回。

如下：

{{[{'name': 'Ari',
    'age': 3
   },
   {
    'name': 'Nate',
    'age': 33
   }] | filter: {'age': 3} }}

--函數--

對每個元素都執行這個函數，返回非假值得元素會出現在新的數組中並返回。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app='myApp'>
        {{ ['Ari', 'likes', 'to', 'travel'] | filter: isCapitalized}}
        <script>
            var app = angular.module('myApp', []);
            app.run(function($rootScope){
                //isCapitalized有且僅有一個參數
                $rootScope.isCapitalized = function(str){
                    return str[0] === str[0].toUpperCase();
                };
            });            
        </script>
    </body>
</html>

Angular過濾器的第二個參數，可以是true。

--true--

對比較值進行，嚴格比較，如下：

{{ ['Ari', 'likes', 'to', 'travel', 'e'] | filter: 'e' : true}}

2、 number

number過濾器將數字格式化成文本，可以為一個數字加上千位分割符，如12345變為12,345。它的參數是可選的，用來控制小數點後的截取位數。另外，傳入的是一個非數字字符，會返回空字符串。

如下：

{{12345 | number:2}}

3、 orderBy

orderBy過濾器可以將一個數組中的元素進行排序，接收一個參數來指定排序規則，參數可以是一個字符串，表示以該屬性名稱進行排序。可以是一個函數，定義排序屬性。還可以是一個數組，表示依次按數組中的屬性值進行排序（若按第一項比較的值相等，再按第二項比較），如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app='myApp'>
        <div>{{ childrenArray | orderBy : 'age' }}</div><!--按age屬性值進行排序，若是-age，則倒序-->
        <div>{{ childrenArray | orderBy : ['age','name'] }}</div><!--如果age相同，按照name進行排序-->
        <div>{{ childrenArray | orderBy : orderFunc }}</div><!--按照函數的返回值進行排序-->
        <script>
            var app = angular.module('myApp', []);
            app.run(function($rootScope){
                $rootScope.childrenArray = [ {name:'Tom', age: 20},
                                             {name:'Mari', age:19},
                                             {name:'Ari', age: 21},
                                             {name:'Jack', age: 19}                                         
                                           ];
                $rootScope.orderFunc = function(ele){
                    return [ele.age, ele.name];
                }
            });            
        </script>
    </body>
</html>

代碼稍多，請自行打開

通過上面的例子，我們對Angular內置的過濾器有了一定了解。那麼，接下來，我們就一起來看看自定義過濾是如何實現的。

Angular的自定義過濾器也比較簡單，使用module的filter方法，返回一個函數搞定，且該函數接收的參數值就是過濾值，最後返回處理後的結果。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <script src="angular.js"></script>
    </head>
    <body ng-app='myApp'>
        {{ [1,2,3,4,5,6] | filterNumber}}
        <script>
            var app = angular.module('myApp', []);
            app.filter('filterNumber', function(){
                return function(input){
                    var arr = [],
                        len,
                        val;
                    if(input){
                        len = input.length;
                        while(len--){
                            (val = input[len]) > 3 && arr.push(val); 
                        }
                    }
                    return arr;
                }
            });            
        </script>
    </body>
</html>

好了，就先暫且探到這兒吧。

一些AngularJS相關文章鏈接：

AngularJS權威教程清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡，並分享我的工作~帶你走近AngularJS系列：

帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡

上一篇文章： AngularJS指令學習進階
下一篇文章： Java框架搭建-Maven、Mybatis、Spring MVC整合搭建

Linux編程

初步認識SELinux安全管理

初步認識Linux

Fedora 9初步認識

linux與windows比較的初步認識

Log4j1.x初步認識

Hibernate初步認識

AngularJS開發指南9：AngularJS作用域的詳解

AngularJS開發指南1：AngularJS簡介

相關文章

AngularJS入門之動畫

AngularJS 初步認識

走進 AngularJS 的世界

Java類的認識

AngularJS開發指南8：AngularJS模塊的詳解

AngularJS開發指南6：AngularJS表單詳解

AngularJS開發指南5：AngularJS表達式詳解

AngularJS開發指南2：AngularJS初始化過程

對ftp和apache代理的初步認識

初步認識和學習BASH和shell

初步認識迭代服務器和並發服務器

對linux根目錄下各文件夾的初步認識

Linux編程

SHELL編程

PERL編程