`
bjtale
  • 浏览: 29608 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

angular.js自定义服务

 
阅读更多

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 v1.8.3.zip

    Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用(Single Page Applications, SPA)。这个版本,v1.8.3,是Angular.js的一个稳定版本,它提供了丰富的功能和改进,帮助开发者构建高性能、可...

    angular.js

    **Angular.js** 是一款强大的JavaScript框架,主要用于构建强交互性的Web应用。它的核心设计理念是引入MVC(Model-View-Controller)模式到前端开发中,从而帮助开发者更高效地组织和管理代码,尤其是在处理复杂的...

    angular.js 本地引用

    在前端开发领域,AngularJS(通常简称为Angular.js)是一个非常流行且强大的JavaScript框架,由Google维护。这个框架主要用于构建动态、单页Web应用程序(SPA),它提供了丰富的功能来简化前端开发过程,包括数据...

    angular.js-master.zip

    AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页应用(SPA,Single Page Applications)。这个"angular.js-master.zip"压缩包很可能是AngularJS的源码仓库,特别是1.3版本的一个分支或...

    基于angular.js的WUI-DatePicker日期选择器插件

    Angular.js 是一个强大的前端JavaScript框架,它提供了丰富的功能和灵活性,用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件,专为提高用户体验而设计,提供了多种...

    angular.min.v125.rar(亲测可用)

    4. **服务**:Angular.js提供了一系列内置服务(如$http、$scope、$location等),同时支持自定义服务,用于在应用的不同部分之间共享功能和数据。 5. **过滤器**:过滤器用于格式化数据,如日期、货币等,可以方便...

    基于angular.js日期选择器.zip

    Angular.js,由Google维护,是一个强大的前端JavaScript框架,它提供了一种声明式编程方式来构建交互式的Web应用。在这个“基于angular.js日期选择器”的项目中,我们关注的是如何利用Angular.js的强大功能来实现对...

    angular.js后台管理系统.zip

    Angular.js,作为一个强大的前端JavaScript框架,由Google维护,被广泛应用于构建复杂的单页应用(SPA)和后台管理系统。本篇将深入探讨Angular.js的核心特性、架构设计以及如何在实际项目中构建一个后台管理系统。 ...

    angular.js-master

    "angular.js-master"中的示例项目可能包含了以上概念的实际应用,例如,你可以看到如何设置模块、创建控制器、定义指令,以及如何使用服务进行数据交互。通过研究这个项目,你将更好地理解和掌握AngularJS的实践用法...

    angular.js-1.6.9

    1.6.9版本中的服务依然强大,且支持自定义服务的创建。 7. **过滤器**:过滤器用于数据格式化,如日期格式化、货币转换等。1.6.9版本提供了多种内置过滤器,如`date`、`currency`等,也可以自定义过滤器以适应个性...

    angular.js+webapi Demo

    Angular.js是Google维护的一个前端JavaScript框架,它极大地简化了构建动态单页应用程序(SPA,Single Page Applications)的过程。WebAPI则是微软提供的一种用于构建RESTful服务的技术,常用于后端数据交互。 **...

    Angular.js跨controller实现参数传递的两种方法.docx

    - **$cookies**:Angular.js的`$cookies`服务也可以用来存储和读取数据,适用于小型数据且不需要实时更新的情况。 ### 注意事项 - 避免过度依赖$rootScope,因为它可能导致不必要的数据污染和性能问题。 - 对于...

    基于angular.js的分页导航

    - `script.js`: 包含AngularJS应用的初始化、服务、指令和控制器的定义。 - `styles.css`: 分页导航条的样式文件,用于美化分页组件的外观。 六、最佳实践 1. 使用模块化:将分页功能封装成一个独立的AngularJS模块...

    Angular.js.zip

    Angular.js,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架的主要目标是简化前端开发,通过提供强大的数据绑定和依赖注入机制,让开发者可以更加专注于应用...

    angular.js-1.3.0

    这个压缩包中的"angular.js-1.3.0-beta.16"文件包含了所有必要的JavaScript库,可以直接在项目中引用,以便利用AngularJS 1.3.0-beta.16的所有特性。不过,使用beta版本时需要注意可能存在不稳定因素,建议在生产...

    Angular.js自定义指令学习笔记实例

    在Angular.js中,自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令,开发者能够创建自己的HTML元素或属性,这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程...

    angular.min.js

    其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。后面会详细介绍。那么,什么又是动态web应用呢?与传统...

    前端项目-c3-angular.zip

    - `style.css`:可能包含一些自定义样式,以适应C3.js图表在AngularJS应用中的展示。 3. **example** 或 **demo** 目录:演示示例,通常包括一个简单的AngularJS应用,展示了如何在实际项目中使用这个指令来创建...

    angular-1.7.7.zip

    Angular.js 是一款强大的前端JavaScript框架,由Google维护,专为构建动态Web应用而设计。在版本1.7.7中,Angular.js延续了其一贯的特性,提供了一整套用于构建交互式、数据驱动的Web界面的工具。这个版本是Angular....

    angular.js:Angular.js 的 Shim 存储库

    Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用程序...深入研究"angular.js-master"中的源码,可以提高对Angular.js工作原理的理解,这对于进行性能优化、调试和自定义扩展非常有帮助。

Global site tag (gtag.js) - Google Analytics