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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JS实现div居中示例
2014/04/17 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python计算列表内各元素的个数实例
2018/06/29 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python3.7 sys模块的具体使用
2019/07/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
小学生教师节广播稿
2015/08/19 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android