快捷導(dǎo)航

Angularjs 依賴壓縮及自定義過濾器寫法

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

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

具體代碼如下所示：

<!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}} // 三個參數(shù)分別是‘input 、n1、n2'
      <br>
      {{name | rJs}}
    </div>
</div>
<script type="text/javascript">
       var app=angular.module("myApp",['kk.filter']);  
       //kk.filter是將外部的過濾器進(jìn)行依賴注入進(jìn)行使用
 app.controller('firstController',['$scope',function($s){
/*上面這行代碼是對依賴進(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>

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

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

您可能感興趣的文章:

相關(guān)文章

Angular8 簡單表單驗證的實現(xiàn)示例
這篇文章主要介紹了Angular8 簡單表單驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
詳解AngularJS中的http攔截
這篇文章主要為大家詳細(xì)介紹了AngularJS中的http攔截，$http服務(wù)允許我們與服務(wù)端交互，有時候我們希望在發(fā)出請求之前以及收到響應(yīng)之后做些事情。即http攔截,需要的朋友可以參考下
2016-02-02
在Angular測試中使用spy的教程詳解
spy?是一種檢查函數(shù)是否被調(diào)用或提供自定義返回值的方法,我們可以使用spy?來測試依賴于服務(wù)的組件,并避免實際調(diào)用服務(wù)的方法來獲取值,在本文中,您將學(xué)習(xí)如何在?Angular?項目中使用?Jasmine?spy,需要的朋友可以參考下
2024-03-03
angular.fromJson與toJson方法用法示例
這篇文章主要介紹了angular.fromJson與toJson方法用法,結(jié)合實例形式分析了AngularJS使用fromJson與toJson方法進(jìn)行json格式數(shù)據(jù)的解析與轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
angularJs使用ng-repeat遍歷后選中某一個的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
收藏AngularJS中最重要的核心功能
本文是小編日常收集整理的關(guān)于：AngularJS中最重要的核心功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-07-07
淺談Angular的12個經(jīng)典問題
Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開發(fā)經(jīng)驗的開發(fā)者，了解本文中的12個經(jīng)典面試問題，都將會是一個深入了解和學(xué)習(xí)Angular2的知識概念的絕佳途徑。
2021-05-05
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的寫法
本篇文章主要介紹了Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的區(qū)別，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下
2016-04-04
angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了angularjs2中父子組件的數(shù)據(jù)傳遞的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07