快捷導(dǎo)航

Angularjs 依賴壓縮及自定義過(guò)濾器寫法

更新時(shí)間：2017年02月04日 09:48:20 作者：DaviGao

這篇文章主要介紹了Angularjs 依賴壓縮及自定義過(guò)濾器寫法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

具體代碼如下所示：

<!DOCTYPE html>
<html>
<body>
<header>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="angular.min.js"></script>
  <script src="filter.js"></script>
</header>
<div ng-app="myApp">
    <div ng-controller="firstController">
      {{name | rHello}}
      <br>
      {{name | rHello:3:5}} // 三個(gè)參數(shù)分別是‘input 、n1、n2'
      <br>
      {{name | rJs}}
    </div>
</div>
<script type="text/javascript">
       var app=angular.module("myApp",['kk.filter']);  
       //kk.filter是將外部的過(guò)濾器進(jìn)行依賴注入進(jìn)行使用
 app.controller('firstController',['$scope',function($s){
/*上面這行代碼是對(duì)依賴進(jìn)行壓縮， 在controller 內(nèi)使用的。firstController是控制器名稱，$scope必須是正確縮寫不可以進(jìn)行隨意書寫，不能壓縮。而function($s)，$s是$scope*的壓縮寫法，隨意寫/
   $s.name="Hello Angularjs";
 }]);
 app.filter('rHello',function(){
   return function(input,n1,n2){
      console.log(input);
      console.log(n1);
      console.log(n2);
      return input.replace(/Hello/, "你好");
   }
 });
</script>
</body>
</html>

//外部引入過(guò)濾器進(jìn)行使用
var appFilter=angular.module(“kk.filter”,[]); 
//這里的kk.filter 是依賴名稱 可以隨便起。以及var appFilter的名字也是隨便起
appFilter.filter(‘rJs',function(){ // 過(guò)濾器名稱 隨便起 
return function(input,n1,n2){ 
console.log(input); 
console.log(n1); 
console.log(n2); 
return input.replace(/js/, “JavaScript”); // 這是實(shí)現(xiàn)的是將js 改為JavaScript（字符串） 
} 
});

以上所述是小編給大家介紹的Angularjs 依賴壓縮及自定義過(guò)濾器寫法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法
本篇文章主要介紹了詳解angularJS+Ionic移動(dòng)端圖片上傳的解決辦法，具有一定的參考價(jià)值，有需要的可以了解一下
2017-09-09
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識(shí),這里整理了一下相關(guān)資料，及示例代碼，幫助大家學(xué)習(xí)和理解，有興趣的小伙伴可以參考下
2016-09-09
深入理解Angular4中的依賴注入
在Angular中使用依賴注入，可以幫助我們實(shí)現(xiàn)松耦合，可以說(shuō)只有在組件中使用依賴注入才能真正的實(shí)現(xiàn)可重用的組件。
2017-06-06
Angular2內(nèi)置指令NgFor和NgIf詳解
Directive的概念在Angular 1.x就存在了，我對(duì)它的認(rèn)識(shí)比較模糊，所以直接通過(guò)一些例子來(lái)說(shuō)明。Angular提供的內(nèi)置執(zhí)行有很多，這次使用兩個(gè)：ngFor、ngIf。
2016-08-08
Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了$http使用post請(qǐng)求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-08-08
體驗(yàn)jQuery和AngularJS的不同點(diǎn)及AngularJS的迷人之處
AngualrJS是一個(gè)很貼心的web應(yīng)用框架，本篇通過(guò)jQuery和Angular兩種方式來(lái)實(shí)現(xiàn)同一個(gè)實(shí)例，從而體驗(yàn)兩者的不同點(diǎn)以及AngularJS的迷人之處
2016-02-02
AngularJS 2.0新特性有哪些
本文介紹了其在AtScript、改善依賴入駐、Annotations、路由方案等方面的改變。雖然不知道打破原有是否是件好事，不過(guò)由于不向后兼容，我們需要為遷移做好計(jì)劃
2016-02-02
Angular中的NgZone.run()有什么用途
在Angular中,NgZone是一個(gè)服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運(yùn)行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運(yùn)行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧
2024-01-01
AngularJS表單詳解及示例代碼
本文主要介紹AngularJS表單的知識(shí)，這里整理了表單的基礎(chǔ)知識(shí)和簡(jiǎn)單的示例代碼，有需要的小伙伴可以參考下
2016-08-08
AngularJS指令詳解及示例代碼
本文主要介紹AngularJS指令,這里整理了簡(jiǎn)單的指令并附示例代碼，有需要的小伙伴可以參考下
2016-08-08