AangularJS入門總結二

時間 2020-06-04

標籤 aangularjs 入門總結简体版

原文原文鏈接

雙向數據綁定：在Mode(JS)中改變數據，而這些變更馬上就會自動出如今View上，反之亦然。一方面能夠作到model變化驅動了DOM中元素變化，另外一方面也能夠作到DOM元素的變化也會影響到Model。
$scope：是一個把view（DOM元素）鏈接到controller上的對象。$scope是model,它提供一個綁定到DOM元素上的「執行上下文」；
$scope：實際就是一個JavaScript對象，controller和view均可以訪問它，能夠利用它在二者間傳遞信息；$scope 裏，既存儲數據，又存儲將要運行在view上的函數；
$rootScope：每一個anguler應用都會有一個最頂層的scope，就是$rootScope，它對應着包含含有ng-app指令屬性的那個dom元素；
module（模板）：
<html ng-app="mainApp"> 指定angular的做用域是在<html>標籤之內部分; var mainApp= angular.module(mainApp, []);在js文件中調用angular對象的module方法來聲明一個模塊，模塊的名字和ng-app的值對應。就可讓angular運行起來了；php
ng-controller：這個指令給DOM元素建立了一個新的$scope 對象，並將這個$scope 對象包含進外層DOM元素的$scope 對象裏。
全部scope都遵循原型繼承，這意味着它們都能訪問父scope們。對任何屬性和方法，若是AngularJS在當前scope上找不到，就會到父 scope上去找，若是在父scope上也沒找到，就會繼續向上找，直到$rootScope 上。若是controller是多層嵌套的，就會從最裏面一直往外找，知道最上層；有些指令屬性能夠選擇性地建立一個獨立的scope，讓這個scope不繼承它的父scope們；
Angular中的"ajax"----$http：$http 服務是AngularJS的核心服務之一，它幫助咱們經過XMLHttpRequest對象或JSONP與遠程HTTP服務進行交流； (1) get方法：$http.get("url?id="+id) .success(function(data){}).error(function(){}); (2) post方法：$http.post("url",{username:$scope.username,pwd:$scope.pwd},success(function(data){}),error(function(){});
表達式: 表達式中不可使用循環語句、判斷語句，事實上在模板中使用複雜的表達式也是一個不推薦的作法，這樣視圖與邏輯就混雜在一塊兒了;
過濾器（filter）:　(九種) Angular內置了一些過濾器：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderBy(排序)；
過濾器使用方式：自定義過濾器，這個就強大了，能夠知足任何要求的數據處理；
明白內置的filter的使用，以及如何定義一個filter。css
filter的兩種使用方法：

　　　　　　1. 在模板中使用filterhtml

　　　　　　　　咱們能夠直接在{{}}中使用filter，跟在表達式後面用 | 分割，語法以下：ajax

　　　　　　　　　　　　　　{{ expression | filter }} express

　　　　　　　　也能夠多個filter連用，上一個filter的輸出將做爲下一個filter的輸入：json

　　　　　　　　　　　　　　{{ expression | filter1 | filter2 | ... }}　　數組

　　　　　　　　filter能夠接收參數，參數用 : 進行分割，以下：瀏覽器

　　　　　　　　　　　　　　{{ expression | filter:argument1:argument2:... }}　　app

　　　　　　　　除了對{{}}中的數據進行格式化，咱們還能夠在指令中使用filter，例如先對數組array進行過濾處理，而後再循環輸出：框架

　　　　　　2. 在controller和service中使用filter

　　　　　　　js代碼中也可使用過濾器，方式就是咱們熟悉的依賴注入，如我要在controller中使用currency過濾器，只需將它注入到該controller中便可，

　　　　　　　　代碼以下：

　　　　　　　　　　app.controller('test',function($scope,currencyFilter){

　　　　　　　　　　 $scope.num = currencyFilter(123);

　　　　　　　　　　}　　

　　　　　　　　在模板中使用{{num}}就能夠直接輸出$123.00了！

　　　　　　　　在服務中使用filter也是一樣：

　　　　　　　　　　要在controller中使用多個filter，並不須要一個一個注入嗎，提供了一個$filter服務能夠來調用所需的filter，你只需注入一個$filter就夠了；

　　　　　　　　　　使用方法以下：

　　　　　　　　　　app.controller('test',function($scope,$filter){

　　　　　　　　　　　　　　$scope.num = $filter('currency')(123);　　

　　　　　　　　　　　　　　$scope.date = $filter('date')(new Date());

　　　　　　　　　　}　　

　　　　　　自定義過濾器：

　　　　　　　　　　filter的自定義方式也很簡單，使用module的filter方法，返回一個函數，該函數接收輸入值，並返回處理後的結果；

　　　　　　　　　　例如：返回一個數組中下標爲偶數的元素；

　　　　　　　　　　　　　　/* Controller js */

　　　　　　　　　　　　　　mainApp.filter("oushu",function(){

　　　　　　　　　　　　　　　　　　return function(Array){

　　　　　　　　　　　　　　　　　　var array = [];

　　　　　　　　　　　　　　　　　　 for(var i=0;i<iArray.length;i++){

　　　　　　　　　　　　　　　　　　　　　　 if(i%2!==0){

　　　　　　　　　　　　　　　　　　　　　　array.push(Array[i]);

　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　 return array;

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　});

　13.指令： 指令能夠用來建立自定義的標籤。能夠用來裝飾元素或者操做DOM屬性。能夠做爲標籤、屬性、註釋和類名使用。

　　　　　　模板中可使用的東西有如下四種：

　　　　　　　　1.指令(directive)：angular提供的或者自定義的標籤和屬性，用來加強HTML表現力；

　　　　　　　　2.標記(markup)：即雙大括號{{}}，可將數據雙向綁定到HTML中；

　　　　　　　　3.過濾器(filter)：用來格式化輸出數據；

　　　　　　　　4.表單控制：用來加強表單的驗證功能。

　　　　　　指令的幾種使用方式以下：

　　　　　　　　做爲標籤：<my-dir></my-dir>

　　　　　　　　做爲屬性：<span my-dir="exp"></span>

做爲註釋：

　　　　　　　　做爲類名：<span class="my-dir: exp;"></span>

　　　　　　　　經常使用的就是做爲標籤和屬性；

　　　　　　樣式相關的指令：

　　　　　　　　ng-class: 給元素綁定類名；

表達式的返回值能夠是類名字符串，用空格分割多個類名；

類名數組，數組中的每一項都會層疊起來生效；

一個名值對應的json對象，其鍵值爲類名值爲boolean類型，當值爲true時，該類會被加在元素上。

　　　　　　　　ng-class-odd ng-class-even 用來配合 ng-repeat分別在奇數列和偶數列使用對應的類。這個用來在表格中實現隔行換色再方便不過了。

　　　　　　　　ng-style：用來綁定元素的css樣式；

　　　　　　　　ng-show ng-hide: 元素顯隱控制，ng-show和ng-hide的值爲boolean類型的表達式，當值爲true時，對應的show或hide生效；

　　　　　　表單控件功能相關指令：

　　　　　　　　ng-checked 控制radio和checkbox的選中狀態

　　　　　　　　ng-selected 控制下拉框的選中狀態

　　　　　　　　ng-disabled 控制失效狀態

　　　　　　　　ng-multiple 控制多選

　　　　　　　　ng-readonly 控制只讀狀態

　　　　　　　以上指令的取值均爲boolean類型，當值爲true時相關狀態生效。

　　　　　　　上面的這些只是單向綁定，只是從數據到模板，不能副作用於數據。要雙向綁定，仍是要使用 ng-model；

　　　　事件綁定相關指令：

　　　　　　　　ng-click

　　　　　　　　ng-change

　　　　　　　　ng-dblclick

　　　　　　　　ng-mousedown

　　　　　　　　ng-mouseenter

　　　　　　　　ng-mouseleave

　　　　　　　　ng-mousemove

　　　　　　　　ng-mouseover

　　　　　　　　ng-mouseup

　　　　　　　　ng-submit

　　　　　　　　事件綁定指令的取值爲函數，而且須要加上括號，例如：

　　　　　　　　而後在controller中定義以下：

　　　　　　　　$scope.change = function($event){

　　　　　　 conolse.log($event.target);

　　　　　　　　}　　

　　　　　　　　在模板中能夠用變量$event將事件對象傳遞到controller中;

　　　　　　特殊的指令：

　　　　　　　　ng-src:angular框架時在DOM內容加載完成以後纔開始發揮做用的，若是模板中存在<img src="{{url}}">,那麼在

　　　　　　　　　　　　頁面開始在加載angular完成以前，頁面會一直顯示一張錯誤的圖片，由於路徑尚未被替換；爲了不這種狀況，

　　　　　　　　　　　　咱們使用ng-src指令，這樣在路徑被正確獲得以前就不會顯示找不到圖片。

　　　　　　　　ng-href: 同上理，<a>標籤的href屬性也須要換成ng-href，這樣頁面上就不會先出現一個地址錯誤的連接；

　　　　　　咱們在模板中使用{{}}顯示數據時，在angular編譯完成以前頁面會顯示出大括號及裏面的表達式。爲了不這個，ng中有一個與{{}}等同的指令:ng-bind，

　　　　　　一樣用於單向綁定，在頁面剛加載的時候就不會顯示出對用戶無用的數據了。儘管這樣，{{}}那麼好用，還不能用了不成？好消息是咱們依然可使用。由於

　　　　　　編寫的是單頁面應用，頁面只會在加載index.html的時候出這個問題，只需在index.html中的模板中換成ng-bind就行。其餘的模板是咱們動態加載的，

　　　　　　就能夠放心使用{{}}了。

　　　　自定義指令：（）

　　14. 服務：做用就是對外提供某個特定的功能，如消息服務，文件壓縮服務等，是一個獨立的模塊；

　　　　　　系統內置的服務以$開頭，系內置的指令以ng開頭；

　　　　　　　定義服務的方式：

　　　　　　　　　　　　使用系統內置的$provide服務；

　　　　　　　　　　　　使用Module的factory方法；

　　　　　　　　　　　　使用Module的service方法。

　　　　　　　　　　使用這三種方式來作一個從遠程獲取數據的服務：

　　　　　　　　　　1）使用內置的$provide服務；

　　　　　　　　　　　　var mainApp=angular.module("mainApp",[],function($provide){

　　　　　　　　　　　　　　　　$provide.factory("getData",function(){

　　　　　　　　　　　　　　　　　　var data=json;

　　　　　　　　　　　　　　　　　　return data;

　　　　　　　　　　　　　　})

　　　　　　　　　　2) 使用factory方式：

　　　　　　　　　　　　mainApp.factory("getData",function(){

　　　　　　　　　　　　　　　　　　var data=json;

　　　　　　　　　　　　　　　　　　return data;

　　　　　　　　　　　　})

　　　　　　　　　3)使用service方式：

　　　　　　　　　　　　mainApp.service(getData,function(){

　　　　　　　　　　　　});

　　　　　　　　Module的service方法，沒有return任何東西，由於service方法自己返回一個構造器，系統會自動使用new關鍵字來建立出一個對象。

　　　　　　　　因此在構造器函數內可使用this，這樣調用該服務的地方即可以直接經過getData.屬性名的方式來訪問數據了；

自定義服務，將$http封裝成jq方式的ajax提交方式：

　　　　　　　　　　 mainApp.factory("ajax",function($http){
       　　　　　　　　　　 return function(config){
                　　　　　　　　 if(config.type == "get"){
                  　　　　　　　　　    var param="?";
                     　　　　　　　　 for(var key in config.data){
                         　　　　　　　　 param+=key+"="+config.data[key]+"&";
                     　　　　　　　　 }
                     　　　　　　　　　　 $http.get(config.url+param).success(config.success);
                 　　　　　　　　 }else{
                     　　　　　　　　　　 $http.post(config.url,config.data).success(config.success);
                 　　　　　　　　　　　　 }
     　　　　　　　　　　　　   };
    　　　　　　　　　　　　});

　　　　　　　　　　使用：

　　　　　　　　　　regApp.controller("regconstructor",function($scope,$http,ajax,$location){

　　　　　　　　　　　　　　　　　　ajax({
                   　　　　　　　　　　　　　　　　url:"xxx.php",
                   　　　　　　　　　　　　　　　　 type:"get",
                 　　　　　　　　　　　　　　　　   data:{
                        　　　　　　　　　　　　　　　　username:$scope.usersname
                   　　　　　　　　　　　　　　　　　},
                  　　　　　　　　　　　　　　　　 success:function(data){
                      　　　　　　　　　　　　　　　　　　 if(data.mes == "0"){
                           　　　　　　　　　　　　　　　　　　　　 $scope.nameinfo="用戶名已存在";
                           　　　　　　　　　　　　　　　　　　　　 $scope.namestyle={color:"red"};
                     　　　　　　　　　　　　　　　　　　   }
                          　　　　　　
                    　　　　　　　　　　　　　　　　　　　　}
               　　　　　　　　　　　　　　 });