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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
js中有关IE版本检测
Jan 04 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
安全检查验收制度
2014/01/12 职场文书
公司口号大全
2014/06/11 职场文书
市场营销毕业求职信
2014/08/07 职场文书
离婚协议书怎么写
2014/09/12 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
民事诉讼代理词
2015/05/25 职场文书