登录  /  注册
首页 > web前端 > js教程 > 正文

Angular如何创建服务?5种方式了解一下!

青灯夜游
发布: 2021-05-10 09:37:33
转载
2546人浏览过

本篇文章给大家介绍一下angular创建服务的5种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Angular如何创建服务?5种方式了解一下!

config配置块

Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在配置块中只有provider能被注入(只有两个例外是$provide和$injector)。而且provider也只能在config中注入。Angular注入服务的5种方式中,只有通过provider和constant注入的服务可以在依赖到config中。

app.controller('MyController', function ($httpProvider) {
	//错误,无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误,配置块中只能注入服务
});
登录后复制

相关推荐:《angularjs教程

关于一些内置的服务

控制器函数是可以被注入的,但是控制器本身是不能被注入到任何东西里面去的,然而,有一个内建的AngularJS服务叫做$controller,它负责设置你的控制器,调用myMod.controller(…)时,你实际上是访问了这个服务的provider。

代码:

myMod.controller('MainController', function($scope) {
  // ...
});
登录后复制

实际上做了以下事情:

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});
登录后复制

类似的还有filter和directive,filter会使用一个叫做$filter的服务以及它的provider $filterProvider,而directive使用一个叫做$compile的服务以及它的provider $compileProvidr。

服务的5中注入方式

factory()

依赖注入器将使用factory函数创建服务的实例,工厂函数返回一个对象。

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});
登录后复制

service()

service注入通过传递一个函数给service,然后使用javascript的new操作生成一个服务,也就是说将属性附加到this上即可,使用这个方法要小心javascript的this陷阱,this并不总是指向执行函数本身,也可能指向顶级对象window。

myModule.service('myService', function () {
	this.foo = 'bar';
});
登录后复制

provider()

实际上以上我们提到的factory和service被实现为provider上的语法糖,通过provider注入的服务可以作为提供者在配置块中使用,另外provider必须实现一个$get属性。

myMod.provider('greeting', function() {
  var text = 'Hello, ';

  this.setText = function(value) {
     text = value;
  };

  this.$get = function() {
     return function(name) {   //$get必须实现,可以返回一个函数或者一个对象
         alert(text + name);
     };
  };
});

myMod.config(function(greetingProvider) {
  greetingProvider.setText("Howdy there, ");
});

myMod.run(function(greeting) {
  greeting('Ford Prefect');
});
登录后复制

constant(name,value)

constant主要用于注册一个常量,value是一个值或者json对象,通常这个常量主要用于配置经常使用的数据,constant配置的服务可以注入到config。

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})
登录后复制

value(name,value)

value主要用于存放一些数据或方法以供使用,如果这个数据或方法需要被修改,就用value来创建服务,其中参数value是一个值或者json对象。另外它不能够依赖到config中。

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});
登录后复制

更多编程相关知识,请访问:编程视频!!

以上就是Angular如何创建服务?5种方式了解一下!的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号