Angular에서 서비스를 만드는 방법은 무엇입니까? 알아내는 5가지 방법!

青灯夜游
풀어 주다: 2021-05-10 10:42:34
앞으로
2806명이 탐색했습니다.

이 글에서는 서비스를 만드는 Angular 5가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular에서 서비스를 만드는 방법은 무엇입니까? 알아내는 5가지 방법!

config 구성 블록

Angular 애플리케이션의 실행은 주로 app.config()와 app.run()의 두 부분으로 나뉩니다. config는 애플리케이션이 실행되도록 공급자를 설정하는 단계입니다. 서비스를 올바르게 사용할 수 있는 경우 구성 블록에는 공급자만 삽입할 수 있다는 점에 유의해야 합니다(유일한 두 가지 예외는 $provide 및 $injector입니다). 그리고 공급자는 구성에만 주입될 수 있습니다. Angular가 서비스를 주입하는 5가지 방법 중 공급자와 상수를 통해 주입된 서비스만 구성에 따라 달라질 수 있습니다.

app.controller('MyController', function ($httpProvider) {
	//错误,无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误,配置块中只能注入服务
});
로그인 후 복사

관련 권장 사항: "angularjs tutorial"

일부 내장 서비스에 대하여

컨트롤러 기능은 삽입할 수 있지만 컨트롤러 자체는 아무것도 삽입할 수 없습니다. 컨트롤러 설정을 담당하는 $controller라는 AngularJS 서비스 myMod.controller(…)를 호출하면 실제로 이 서비스 제공자에 액세스합니다.

코드:

myMod.controller('MainController', function($scope) {
  // ...
});
로그인 후 복사

실제로는 다음을 수행합니다.

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});
로그인 후 복사

마찬가지로 필터와 지시문은 $filter라는 서비스와 해당 공급자 $filterProvider를 사용하는 반면 지시어는 $compile이라는 서비스와 해당 공급자를 사용합니다. $compileProvidr.

서비스를 주입하는 5가지 방법

factory()

의존성 주입기는 팩토리 함수를 사용하여 서비스 인스턴스를 생성하고 팩토리 함수는 객체를 반환합니다.

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});
로그인 후 복사

service()

service 주입은 서비스에 함수를 전달한 다음 javascript의 새로운 작업을 사용하여 서비스를 생성합니다. 즉, 이 방법을 사용할 때 주의하세요. javascript의 this 트랩에서 이는 항상 실행 함수 자체를 가리키는 것은 아니지만 최상위 개체 창을 가리킬 수도 있습니다.

myModule.service('myService', function () {
	this.foo = 'bar';
});
로그인 후 복사

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 객체입니다. 일반적으로 이 상수는 자주 사용되는 데이터를 구성하는 데 사용됩니다. 구성.

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})
로그인 후 복사

value(name,value)

value는 주로 사용할 일부 데이터나 메서드를 저장하는 데 사용됩니다. 이 데이터나 메서드를 수정해야 하는 경우 value를 사용하여 서비스를 생성합니다. 여기서 매개변수 값은 값입니다. 또는 json 객체. 또한 구성에서는 신뢰할 수 없습니다.

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});
로그인 후 복사

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular에서 서비스를 만드는 방법은 무엇입니까? 알아내는 5가지 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!