angular에서 module.config(configFn)에 의존관계를 주입하는 방법
Angular에서는 주사할 수 있습니다.$routeProvider에게config기능.
module.config(function ($routeProvider) {
});
내 서비스를 여기에 투입하고 싶다.
module.config(function ($routeProvider, myService) {
});
서비스가 올바르게 정의되어 있는 것은 확실합니다만, 다음과 같은 예외가 발생합니다.unknown myService주사했을 때의 이벤트
module.config(function ($routeProvider, $http) {
});
아직도 라고 쓰여 있다unknown $http.
왠지 알아?
Modules 페이지의 "Module Loading & Dependencies" 섹션:
구성 블록 - 공급자 등록 및 구성 단계에서 실행됩니다.컨피규레이션블록에는 프로바이더와 상수만 삽입할 수 있습니다.이는 서비스가 완전히 설정되기 전에 실수로 인스턴스화되는 것을 방지하기 위한 것입니다.
실행 블록 - 인젝터가 생성된 후 실행되며 애플리케이션을 킥스타트하는 데 사용됩니다.실행 블록에는 인스턴스와 상수만 주입할 수 있습니다.이는 애플리케이션 실행 시 추가 시스템 구성을 방지하기 위한 것입니다.
따라서 자체 서비스나 $http 등의 임베디드 서비스를 config()에 삽입할 수 없습니다.대신 run()을 사용합니다.
평판이 좋지 않아서 댓글을 달 수 없지만 마크의 답변에 더하고 싶었어요.
프로바이더를 직접 등록할 수 있습니다.기본적으로는 다음 명령어를 가진 객체(또는 컨스트럭터)입니다.$get방법.프로바이더를 등록할 때 표준 버전을 서비스나 공장처럼 사용할 수 있지만 프로바이더 버전은 더 일찍 사용할 수 있습니다.비상대기상태grumpy로 등록된 프로바이더
angular.module('...', [])
.provider('grumpy', GrumpyProviderObject)
다음으로 설정 기능으로 사용할 수 있습니다.
.config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])
컨트롤러에 주입할 수 있습니다.
.controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])
그grumpy주입되는 물체myController단순한 결과입니다.$get의 메서드GrumpyProviderObject등록하는 프로바이더는 일반 JavaScript 컨스트럭터일 수도 있습니다.
주의: @Problematic의 코멘트에 따르면 프로바이더의 초기화(에의 콜)angular.module().provider(…)를 사용할 수 있도록 하려면 , 설정 기능의 선두에 있을 필요가 있습니다.
다음과 같이 할 수 있습니다.
(function() {
'use strict';
angular.module('name', name).config(config);
// You can do this:
config.$inject = ['$routeProvider', 'myService'];
function config($routeProvider, myService) {
// Or better to use this, but you need to use ng-annotate:
/* ngInject */
}
});
여기서 설명하는 것은 베스트 프랙티스입니다.
를 수동으로 호출하여 종속성이 없는 서비스에 액세스할 수 있습니다..config()차단합니다.작성한 서비스에 통과해야 하는 종속성이 없는 경우 다음을 사용할 수 있습니다.
angular.module('myApp').config(function () {
var myService = angular.injector(['ng']).get('myService');
});
할 수 있습니다.$http아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.
angular.module('myApp').config(function () {
var http = angular.injector(['ng']).get('$http');
});
주의: 보통 설정 단계에서는 서비스를 투입할 필요가 없습니다.설정이 가능한 프로바이더를 작성하는 것이 좋습니다.이 기능은 서드파티 라이브러리가 이미 실행 중인 Angular 앱의 인젝터에 액세스해야 하는 경우에 노출된다고 합니다.
다음 templateProvider.getTemplate('about')와 같이 종속성을 주입하고 루트(.config)의 함수 폼을 호출하는 경우
.state('index.about', {
url: "/about",
templateUrl: templateProvider.getTemplate('about'),
controller: 'AboutCtrl',
controllerAs: 'about',
data: {pageTitle: 'About Us Page'}
})
공급자를 생성해야 합니다.서비스도 공장도 아닙니다.
이름에서 템플릿 경로를 생성하는 공급자의 실제 예를 다음에 나타냅니다.
(function () {
'use strict';
angular
.module('mega-app')
.provider('template', provider);
function provider(CONSTANT) {
// The provider must include a $get() method This $get() method
// will be invoked using $injector.invoke() and can therefore use
// dependency-injection.
this.$get = function () {
return {}
};
/**
* generates template path from it's name
*
* @param name
* @returns {string}
*/
this.getTemplate = function (name) {
return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';
}
/**
* generates component path from it's name
* @param name
* @returns {string}
*/
this.getComponent = function (name) {
return CONSTANT.COMPONENTS_URL + name + '.html';
}
};
})();
이러한 프로바이더의 루트(.config)에서의 사용은 다음과 같습니다.
(function () {
'use strict';
angular
.module('mega-app')
.config(routes);
function routes($stateProvider, $urlRouterProvider, templateProvider) {
$stateProvider
//----------------------------------------------------------------
// First State
//----------------------------------------------------------------
.state('index', {
abstract: true,
url: "/index",
templateUrl: templateProvider.getComponent('content'),
controller: 'IndexCtrl',
controllerAs: 'index',
})
//----------------------------------------------------------------
// State
//----------------------------------------------------------------
.state('index.home', {
url: "/home",
templateUrl: templateProvider.getTemplate('home'),
controller: 'HomeCtrl',
controllerAs: 'home',
data: {pageTitle: 'Home Page'}
})
//----------------------------------------------------------------
// State
//----------------------------------------------------------------
.state('index.about', {
url: "/about",
templateUrl: templateProvider.getTemplate('about'),
controller: 'AboutCtrl',
controllerAs: 'about',
data: {pageTitle: 'About Us Page'}
})
//----------------------------------------------------------------
// Default State
//----------------------------------------------------------------
$urlRouterProvider.otherwise('/index/home');
};
})();
VIP 메모:
프로바이더를 주입하려면 프로바이더를 xxxProvider로 포스트픽스해야 합니다(프로바이더의 이름은 포스트픽스 할 수 없습니다. .config에서 주입할 때만).
그게 너희들을 더 편하게 해줄 수 있다면 말이야.
이 답변에서 설명한 바와 같이 추가만 하면 됩니다.Provider합니다.$get().
가장 깨끗한 해결책은 아닐 수 있지만, 효과가 있습니다.
module.config(function ($routeProvider, myServiceProvider) {
// Call a function hello() on myService.
myServiceProvider.$get().hello();
});
다음과 같이 시도해 볼 수 있습니다.
module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);
언급URL : https://stackoverflow.com/questions/15286588/how-to-inject-dependency-into-module-configconfigfn-in-angular
'programing' 카테고리의 다른 글
| 장고에서는 에러:데이터를 덤프할 때 데이터베이스를 직렬화할 수 없습니다. (0) | 2023.02.22 |
|---|---|
| Create React App에서 API 키를 숨기려면 어떻게 해야 하나요? (0) | 2023.02.22 |
| javascript를 사용하여 리디렉션하지 않고 URL 변경 (0) | 2023.02.22 |
| angularjs에서 간단한 드래그 앤 드롭을 작성하는 방법 (0) | 2023.02.22 |
| woocommerce - 카트 항목 수량을 프로그래밍 방식으로 업데이트합니다. (0) | 2023.02.22 |