目录
config配置块
关于一些内置的服务
服务的5中注入方式
factory()
service()
provider()
constant(name,value)
value(name,value)
首页 web前端 js教程 Angular如何创建服务?5种方式了解一下!

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

May 10, 2021 am 09:37 AM
angular service

本篇文章给大家介绍一下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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

聊聊Angular中的元数据(Metadata)和装饰器(Decorator) 聊聊Angular中的元数据(Metadata)和装饰器(Decorator) Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

angular学习之详解状态管理器NgRx angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

一文探究Angular中的服务端渲染(SSR) 一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 吗?可以帮助网站提供更好的 SEO 支持哦!

浅析angular中怎么使用monaco-editor 浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统 Angular + NG-ZORRO快速开发一个后台系统 Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

如何使用PHP和Angular进行前端开发 如何使用PHP和Angular进行前端开发 May 11, 2023 pm 04:04 PM

随着互联网的飞速发展,前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言,可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架,可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发,以及如何将它们

浅析Angular中的独立组件,看看怎么使用 浅析Angular中的独立组件,看看怎么使用 Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

See all articles