angularJS

      AngularJs

數據綁定:模型數據與視圖位置的關聯關係;

 模板引擎 <script type=’text/template’></script>

單向數據綁定  從模型到視圖  ng-bind  或者 {{}}  {{}}會有閃爍現象;添加ng-cloak能夠解決閃爍   經過ng-bind-template能夠綁定多個數據

 

模型數據經過一個內置服務$scope來提供,這個$scope是個空對象;經過爲這個對象添加屬性或者方法即可以在相應的視圖模板裏被訪問

雙向數據綁定  便可從模型到視圖;又可從視圖到模型(須要藉助表單元素;而且只能是表單元素input select textarea);ng-model=’msg’

  視圖上有’msg’;就會關聯或者綁定到模型上  $scope.msg

$scope是個空對象,經過在視圖上給其關聯屬性或者方法;在model中就能夠獲取到;

視圖上要產生數據或者要變化數據須要藉助表單元素

注意點:1表單元素  2 ng-model指令    3

 

案例解釋:  

當在input框中輸入內容時,ng-model會把數據傳到$scope.msg上;$scope又經過{{}}單向數據綁定到頁面上,造成了閉合;

相關指令:

ng-app 不能寫到head中

1初始化$scope

  1  ng-init=」name=’wjx’;age=’25’」 (瞭解)

  2  $scope.name

2 在視圖裏面添加了   在模型上添加single這樣的方法

3 事件擴展 ng-click  ng-dblclick  ng-blur  ng-mouseout

4 遍歷

 <ul>

<li ng-repeat=’(key,star) in stars ’>{{star.name}}{{star.age}}</li>

       </ul>

 

5過濾

經過ng-repeat能夠將數組或對象數據迭代到視圖模板中，ng-switch、on、ng-switch-when能夠對數據進行篩選。

ng-switch on  ng-switch-when  知足條件顯示  不知足不顯示

<li ng-repeat=’item in items’  ng-switch=’item’>

//<li ng-repeat=’item in items’ ng-switch on=’item’>

<span ng-switch-when=’css’>{{item}}</span>

</li>

6做用域

  做用域的產生:一個angular應用是由多個視圖構成的,視圖有又是指的是HTML元素,一般HTML元素會發生嵌套;另外一方面視圖又屬於某個控制器,進而控制器之間也產生了嵌套;

每一個控制器對應一個視圖,也就是$scope對象,不一樣層級控制器下的$scope便產生了做用域;

新建一個函數就會產生一個新的做用域,而且子做用域能夠訪問父級做用域,父級不能訪問本身做用域;

ng-app不能嵌套  ng-controller  能夠嵌套

根做用域:ng-app  對應的模型 $scope所產生的做用域

1.1 子做用域

經過ng-controller指令能夠建立一個子做用域，新建的做用域能夠訪問其父做用域的數據。

7過濾器:在angularjs中,使用過濾器格式化展現數據,在 ’{{}}’ 中使用 ’|’ 來調用過濾器,使用 ’: ’ 來傳遞參數;

currency  貨幣單位:   <li> {{price|currency:’¥’}}</li>

date   日期處理:   {{now|date:’yyyy-MM/dd hh:mm:ss’}}         $scope.now=new Date();

filter  在給定數組中選擇知足條件的子集,而且返回一個知足條件的數組;條件能夠是string  object  function;

Json  將JavaScript對象轉換成 JSON格式的字符串;

limitTo  截取   {{items|limitTo:2}   {{items|limitTo:-1}倒着截取

uppercase / lowercase  將文本轉化成大寫/小寫形式  {{str|uppercase}}

number   數字格式化,可控制小數位數,將字符串轉化成數子,默認保留三位小數,四捨五入; 裏面不能有字符,內部使用Number原理實現,可傳參   {{str|number:2}}

Number()、裏面不能包含非數字字符,不然返回NAN,  ‘10.5’  ==>  10.5

parseInt():通常用於取整;從左往右截取,必須以數字或者負號開頭,不然返回NAN;直到遇到非數字字符(包括小數點)中止;  ‘10.5px’  ==>  10

parseFloat()   ‘10.5px’  ==>  10.5

orderby  對數組進行排序,第二個參數可控制方向 默認false(升序) ture(倒序)  按照 ASCA碼排序, abc  123

自定義過濾器:

App.directive();自定義指令  自定義方法如要使用,就一種可能:傳參數

App.filter(); 自定義過濾器;  |調用   :  傳參

App.controller();   自定義控制器;

方法：使用回調函數，在回調函數中return一個方法function,這個方法是你自定義邏輯

  傳遞的是返回來的function;

 

App.directive(‘name’,function(){   

       Return{

 

}

})

App.filter(‘demo’,function(){

   Return  function(){

  

}

})

自定義過濾器之首字母大寫

  App.filter(‘capitalize’,function(){

Return  function(input){

return  Input[0].toUpperCase()+input.slice(1);

}

})

調用：＜ｈ４＞｛｛ｉｎｆｏ｜ｃａｐｉｔａｌｉｚｅ｝｝</h4>

 

  App.controller(‘DemoController’,[‘$scope’,function(){

}]);

 

8 依賴注入

基本理解: 查找依賴,並注入給你;

  angualrJS這個框架,在定義之初作好了一些基礎性的任務,而且這些基礎性的任務能實現複用,作成了獨立的模塊,在咱們使用哪一個模塊的時候,直接調用它就能夠發揮做用了;而且這些模塊獨立沒法完成一些具體的業務,只有相互組合才能發揮更好的做用;

   開發者在使用其開發時,就須要使用angular事先提供的模塊,開發本身的業務邏輯,

   如:造本身的控制器,須要依賴模型===>$scope 來顯示數據,這時開發者須要向angularJS申請模塊$scope,angularJS 會自動查找有沒有一個$scope, 找到以後再交給開發者,交給的過程叫作注入;

自定義控制器:

   行內式注入:

   App.controller(‘DemoController’,[   ‘$scope’, ‘$http’ function($scope,$http){

              //  [ ] 數組來實現依賴注入;告訴angualr造控制器須要$scope ,找見以後

          //angularjs  經過回調函數的實參交還給你,須要有個形參$scope接收               

}])

   推斷式依賴注入:

App.contoller(‘DemoController’,function($scope,$http){

 //angualrJS  猜想你是否是須要$scope和$http這兩個模塊,找到之後傳遞給你

  //存在問題 :在上線時,代碼壓縮,長變量名會變成a/b/c; angularjs找不到a/b模塊;會出錯

})

 

9 服務:

  服務是一個對象或者函數;對外提供特殊的功能;

  這個對象暴露一些屬性或者一些方法,這些方法能夠實現想要的功能

  內置服務:

  模塊依賴:

  Var App=angular.module(‘App’,[ ]);

  $location

 是angularjs提早封裝好的;提供獲取地址相關的服務  

 是對原生javascript中location對象屬性和方法的封裝;

  App.controller(‘Democontroller’,[‘$scope’,’$location’,function($scope,$location){

$scope.absUrl=$location.absUrl();  //絕對路徑

$scope.url=$location.url();    //是錨點地址後面的

$scope.host

}])

 地址是由若干個部分組成的;

  http://   協議  protocol

  www.baidu.com  / 124.12.134.12  主機   

 : 8080    端口號(默認省略)

  #  錨點    hash

  ?name=wjx&age=25  查詢參數(querystring)  

   angularJS中的search 用來獲取傳遞的參數的,問號以後的name=wjx&age=25

  與原生的不同;是爲了開發單頁面應用纔去作的

  Hostname  域名  ===>localhost

  href  

  $timeout  $interval  $filter $log $http服務

使用:要用那個服務,在控制器裏面的數組裏面依賴那個服務,而且在回調函數裏面接收哪一個服務;

   App.controller(‘DemoController’,[‘$scope’,’$timeout’,’$interval’,function($scope,$timeout,$interval){

$timeout(function(){

 $socpe.msg=’執行哦’

},2000);

Var timer= $inerval(function(){

$scope.now=new Date();

},1000)

//清除定時器

$scope.stope=function(){

$interval.cancel(timer);

}

 

}])

 

  $filter 服務

  數據能夠在視圖層面格式化,又能夠模型層面格式化;$filter函數傳遞不一樣參數,就表明不一樣的過濾器;

      $scope.str = $filter(‘九種過濾器’)(能夠傳參數);

      裏面傳哪一種過濾器,就返回那個函數;

App.controller(‘DemoController’,[‘$scope’,’$filter’,function(){

Function($scope,$filter){

$scope.price   =11.11;

Var currency=$filter(‘currency’);

$scope.price=currency($scope.price);

$scope.str=’hello angular’;

Var  uppercase$filter(‘uppercase’);

$scope.str=uppercase($scope.str);

$scope.str1 = $filter(‘limitTo’)($scope.str,2);

}

}]);

 

$log  //使用日誌服務

App.controller(‘DemoController’,[‘$log’,function($log){

$log.info(‘普通訊息’);

$log.warning(‘警告信息’);

$log.error(‘錯誤信息’);

$log.log(‘打印信息’);

$log.debug(‘調試信息’);

$log.http()

}])

 

 

$http 服務;

  用於向服務端發請求;

$http是對 XMLHttpRequest對象的封裝;和ajax相似;

$http({

   url: ’example.php’,

   Method : ’get ’ ,

   Headers: {

‘Content-type’:’application/x-www-form-urlended’

 },

   params : {  //get參數

name : ‘wjx’

},

  data : {  //post 傳參

age : 10

}

}).success(function (info){

//info  就是返回的數據

});