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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
js实现常用排序算法
2016/08/09 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
在layui中select更改后生效的方法
2019/09/05 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python去除扩展名的实例讲解
2018/04/23 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Django权限设置及验证方式
2020/05/13 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
校长就职演讲稿
2014/01/06 职场文书
主管会计岗位责任制
2014/02/10 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
2014年残联工作总结
2014/11/21 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书