Angularjs 依赖压缩及自定义过滤器写法


Posted in Javascript onFebruary 04, 2017

 具体代码如下所示:

<!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}} // 三个参数分别是‘input 、n1、n2'
      <br>
      {{name | rJs}}
    </div>
</div>
<script type="text/javascript">
       var app=angular.module("myApp",['kk.filter']);  
       //kk.filter是将外部的过滤器进行依赖注入进行使用
 app.controller('firstController',['$scope',function($s){
/*上面这行代码是对依赖进行压缩, 在controller 内使用的。firstController是控制器名称,$scope必须是正确缩写不可以进行随意书写,不能压缩。而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>
//外部引入过滤器进行使用
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”); // 这是实现的是将js 改为JavaScript(字符串) 
} 
});

以上所述是小编给大家介绍的Angularjs 依赖压缩及自定义过滤器写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
javascript实现复选框全选或反选
Feb 04 #Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 #Javascript
javascript表单正则应用
Feb 04 #Javascript
JS中的phototype详解
Feb 04 #Javascript
详解JavaScript RegExp对象
Feb 04 #Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
You might like
php的sso单点登录实现方法
2015/01/08 PHP
php格式化电话号码的方法
2015/04/24 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
JavaScript隐式类型转换
2016/03/15 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
深入理解python中的select模块
2017/04/23 Python
python paramiko模块学习分享
2017/08/23 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python实现决策树分类(2)
2018/08/30 Python
python numpy 按行归一化的实例
2019/01/21 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python descriptor(描述符)的实现
2020/11/15 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
C语言笔试题
2014/09/04 面试题
C++面试题目
2013/06/25 面试题
如何利用find命令查找文件
2015/02/07 面试题
大队委竞选演讲稿
2014/04/28 职场文书
教师专业自荐信
2014/05/31 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
如何使用python包中的sched事件调度器
2022/04/30 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python