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入门·对象属性方法大总结
Oct 01 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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+MSSQL分页的例子
2006/10/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
javascript add event remove event
2008/04/07 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python获取图片颜色信息的方法
2015/03/18 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
英语自荐信范文
2013/12/11 职场文书
创先争优活动方案
2014/02/12 职场文书
公司办公室岗位职责
2014/03/19 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
工作试用期自我评价
2015/03/10 职场文书
工作后的感想
2015/08/07 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL