AngularJs允许开发者创建自定义服务,用于实现特定的功能。主要使用的服务类型包括:value、constant、factory、service。
1.value与constant
二者在使用上没有太大区别,基本意义都是为模块提供一个值,可以是字符串也可是JS对象。
2.factory
可以提供一个服务工厂,通常返回一个函数,具体语法为:
angular.module('myApp',[]).factory('factoryName',function(args){ return function(otherArgs){ //some operates args & otherArgs } })
3.service
service通常用作在控制器中实现特定功能,该方法接受的第二个参数是一个构造函数,并且使用这个构造函数来创建service的一个对象。service也可以接收依赖注入:
function serviceConstructor(arg1,arg2){ //some operates. } angular.module('myApp',[]).service('serviceName',['arg1','arg2',serviceConstructor]);
以下示例说明了这几种自定义服务的使用:
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta charset='ut-8'> <title>Some title</title> <style type="text/css"> p{color: red;margin-left: 15px;} input{width: 150px;} </style> </head> <body ng-controller='someCtrl'> <h2>Custom service</h2> Censored words:<br> <p>{{words | json}}</p> <hr> Enter phrase:<br> <input type='text' ng-model='inPhrase'><hr> Filtered by factory: <p>{{censorFactory}}</p> Filtered by service: <p>{{censorService}}</p> <script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script> <script> var app = angular.module('myApp',[]); app.value('words',["can't","quit","bug"]) .constant('repString',"####"); app.factory('censorF',function(words,repString){ return function(inString){ var out = inString; for (i in words) { out = out.replace(words[i],repString); }; return out; } }) function censorObj(words,repString){ this.censor = function(inString){ var outString = inString; for(i in words){ outString = outString.replace(new RegExp(words[i],'g'),repString); } return outString; } this.censoredWords = function (){ return words; } } app.service('censorS',['words','repString',censorObj]) .controller('someCtrl',function($scope,censorF,censorS){ $scope.words = censorS.censoredWords(); $scope.inPhrase = ''; $scope.censorFactory = censorF(''); $scope.censorService = censorS.censor(''); $scope.$watch('inPhrase',function(newValue,oldValue){ $scope.censorFactory = censorF(newValue); $scope.censorService = censorS.censor(newValue); }); }); </script> </body> </html>
以上是一个关键词过滤的示例,使用factory和service实现了同样的过滤功能。值得注意的是:
JavaScript并不提供类似于JAVA的replaceAll方法,replace函数只能匹配第一个词并进行替换,若需要使用全部匹配替换,则需要使用RegExp,或使用如下的方法:
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if (!RegExp.prototype.isPrototypeOf(reallyDo)) { return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith); } else { return this.replace(reallyDo, replaceWith); } }
相关推荐
Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用(Single Page Applications, SPA)。这个版本,v1.8.3,是Angular.js的一个稳定版本,它提供了丰富的功能和改进,帮助开发者构建高性能、可...
**Angular.js** 是一款强大的JavaScript框架,主要用于构建强交互性的Web应用。它的核心设计理念是引入MVC(Model-View-Controller)模式到前端开发中,从而帮助开发者更高效地组织和管理代码,尤其是在处理复杂的...
在前端开发领域,AngularJS(通常简称为Angular.js)是一个非常流行且强大的JavaScript框架,由Google维护。这个框架主要用于构建动态、单页Web应用程序(SPA),它提供了丰富的功能来简化前端开发过程,包括数据...
AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页应用(SPA,Single Page Applications)。这个"angular.js-master.zip"压缩包很可能是AngularJS的源码仓库,特别是1.3版本的一个分支或...
Angular.js 是一个强大的前端JavaScript框架,它提供了丰富的功能和灵活性,用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件,专为提高用户体验而设计,提供了多种...
4. **服务**:Angular.js提供了一系列内置服务(如$http、$scope、$location等),同时支持自定义服务,用于在应用的不同部分之间共享功能和数据。 5. **过滤器**:过滤器用于格式化数据,如日期、货币等,可以方便...
Angular.js,由Google维护,是一个强大的前端JavaScript框架,它提供了一种声明式编程方式来构建交互式的Web应用。在这个“基于angular.js日期选择器”的项目中,我们关注的是如何利用Angular.js的强大功能来实现对...
Angular.js,作为一个强大的前端JavaScript框架,由Google维护,被广泛应用于构建复杂的单页应用(SPA)和后台管理系统。本篇将深入探讨Angular.js的核心特性、架构设计以及如何在实际项目中构建一个后台管理系统。 ...
"angular.js-master"中的示例项目可能包含了以上概念的实际应用,例如,你可以看到如何设置模块、创建控制器、定义指令,以及如何使用服务进行数据交互。通过研究这个项目,你将更好地理解和掌握AngularJS的实践用法...
1.6.9版本中的服务依然强大,且支持自定义服务的创建。 7. **过滤器**:过滤器用于数据格式化,如日期格式化、货币转换等。1.6.9版本提供了多种内置过滤器,如`date`、`currency`等,也可以自定义过滤器以适应个性...
Angular.js是Google维护的一个前端JavaScript框架,它极大地简化了构建动态单页应用程序(SPA,Single Page Applications)的过程。WebAPI则是微软提供的一种用于构建RESTful服务的技术,常用于后端数据交互。 **...
- **$cookies**:Angular.js的`$cookies`服务也可以用来存储和读取数据,适用于小型数据且不需要实时更新的情况。 ### 注意事项 - 避免过度依赖$rootScope,因为它可能导致不必要的数据污染和性能问题。 - 对于...
- `script.js`: 包含AngularJS应用的初始化、服务、指令和控制器的定义。 - `styles.css`: 分页导航条的样式文件,用于美化分页组件的外观。 六、最佳实践 1. 使用模块化:将分页功能封装成一个独立的AngularJS模块...
Angular.js,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架的主要目标是简化前端开发,通过提供强大的数据绑定和依赖注入机制,让开发者可以更加专注于应用...
这个压缩包中的"angular.js-1.3.0-beta.16"文件包含了所有必要的JavaScript库,可以直接在项目中引用,以便利用AngularJS 1.3.0-beta.16的所有特性。不过,使用beta版本时需要注意可能存在不稳定因素,建议在生产...
在Angular.js中,自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令,开发者能够创建自己的HTML元素或属性,这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程...
其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。后面会详细介绍。那么,什么又是动态web应用呢?与传统...
- `style.css`:可能包含一些自定义样式,以适应C3.js图表在AngularJS应用中的展示。 3. **example** 或 **demo** 目录:演示示例,通常包括一个简单的AngularJS应用,展示了如何在实际项目中使用这个指令来创建...
Angular.js 是一款强大的前端JavaScript框架,由Google维护,专为构建动态Web应用而设计。在版本1.7.7中,Angular.js延续了其一贯的特性,提供了一整套用于构建交互式、数据驱动的Web界面的工具。这个版本是Angular....
Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用程序...深入研究"angular.js-master"中的源码,可以提高对Angular.js工作原理的理解,这对于进行性能优化、调试和自定义扩展非常有帮助。