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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
AutoJs实现刷宝短视频的思路详解
May 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
初品cakephp 入门基础
2012/02/16 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
js验证上传图片的方法
2015/05/12 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
微信小程序实现图片上传
2019/05/23 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
解析Python中的二进制位运算符
2015/05/13 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python字典排序的方法
2019/10/12 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python绘制动态曲线教程
2020/02/24 Python
Python新手学习函数默认参数设置
2020/06/03 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
迎新生标语大全
2014/10/06 职场文书
先进教师事迹材料
2014/12/16 职场文书
创业计划书详解
2019/07/19 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
图文详解matlab原始处理图像几何变换
2021/07/09 Python