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常见表单应用技巧
Jan 09 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js禁止表单重复提交
Aug 29 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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(2)
2006/10/09 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python版本五子棋的实现代码
2018/12/11 Python
python读取文件名并改名字的实例
2019/01/07 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
董事长秘书职责
2014/01/31 职场文书
公司中秋节活动方案
2014/02/12 职场文书
运动会入场词200字
2014/02/15 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书