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获取网页中图片高度的两种方法
Sep 26 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JQuery工具函数汇总
Jun 15 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
初识laravel5
2015/03/02 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
JS实现商品橱窗特效
2020/01/09 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python 字典套字典或列表的示例
2019/12/16 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
培训专员岗位职责
2014/02/26 职场文书
高中军训感言800字
2014/03/05 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
python中 .npy文件的读写操作实例
2022/04/14 Python