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 相关文章推荐
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
用Node写一条配置环境的指令
Nov 14 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php去除HTML标签实例
2013/11/06 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
破解安装Pycharm的方法
2018/10/19 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
党员公开承诺书和承诺事项
2014/03/25 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
美术课外活动总结
2014/07/08 职场文书
营销与策划实训报告
2014/11/05 职场文书
什么是SOLID
2022/03/24 Javascript