각도에서 module.config (configFn)에 종속성을 주입하는 방법
각도에서, 우리는 삽입 할 수 $routeProvider받는 config기능
module.config(function ($routeProvider) {
});
내 서비스를 다음과 같이 주입하고 싶습니다.
module.config(function ($routeProvider, myService) {
});
서비스가 제대로 정의되어 있다고 확신하지만 다음 unknown myService과 같이 주입하면 이벤트 라는 예외가 발생합니다 .
module.config(function ($routeProvider, $http) {
});
그것은 여전히 말한다 unknown $http.
그 이유를 아십니까?
에서 모듈 페이지, 섹션 "모듈로드 및 종속성"
구성 블록 -공급자 등록 및 구성 단계에서 실행됩니다. 공급자와 상수 만 구성 블록에 삽입 할 수 있습니다. 이는 서비스가 완전히 구성되기 전에 우발적 인 서비스 인스턴스화를 방지하기위한 것입니다.
블록 실행 -인젝터가 생성 된 후 실행되고 애플리케이션을 킥 스타트하는 데 사용됩니다. 인스턴스와 상수 만 실행 블록에 삽입 할 수 있습니다. 이는 애플리케이션 실행 중에 추가 시스템 구성을 방지하기위한 것입니다.
따라서 자신의 서비스 나 $ http와 같은 내장 서비스를 config ()에 삽입 할 수 없습니다. 대신 run ()을 사용하십시오 .
댓글을 올릴만한 평판이 충분하지 않지만 Mark의 답변에 추가하고 싶었습니다.
공급자를 직접 등록 할 수 있습니다. 기본적으로 $get메서드 가있는 객체 (또는 생성자)입니다 . 공급자를 등록하면 표준 버전을 서비스 나 공장처럼 사용할 수 있지만 공급자 버전을 더 일찍 사용할 수 있습니다. 따라서 grumpy등록 된 공급자는
angular.module('...', [])
.provider('grumpy', GrumpyProviderObject)
그런 다음 구성 기능에서 다음과 같이 사용할 수 있습니다.
.config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])
간단하게 컨트롤러에 주입 할 수 있습니다.
.controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])
에 grumpy주입되는 객체 myController는 단순히 .NET에서 $get메서드를 실행 한 결과입니다 GrumpyProviderObject. 등록하는 공급자는 일반 JavaScript 생성자 일 수도 있습니다.
참고 : @Problematic의 설명에 따라 공급자 초기화 (에 대한 호출 angular.module().provider(…)은 config 함수를 사용하기 전에 와야합니다.
다음과 같이 할 수 있습니다.
(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)에서 함수 양식을 호출하기 위해 종속성 (서비스에서 가정)을 주입하려는 경우 templateProvider.getTemplate ( 'about')
.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에 삽입 할 때만 뒤에 붙일 수 없습니다).
앱을 차단 하는 동안 종속성이없는angular.injector 서비스에 액세스하기 위해 수동으로 호출 할 수 있습니다 . 생성 한 서비스에 트래버스해야하는 종속성이없는 경우 다음을 사용할 수 있습니다..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');
});
Note: Usually you shouldn't need to inject services during your config phase, it's better design to create a provider that allows for configuration. The docs say this functionality is exposed for cases where 3rd party libraries need to get access to the injector of an already-running Angular app.
If it can make things easier for some of you.
Per explained in this answer, you can just append Provider to your custom service and then access the internal functions using $get().
It may not be the cleanest solution, but it does the job.
module.config(function ($routeProvider, myServiceProvider) {
// Call a function hello() on myService.
myServiceProvider.$get().hello();
});
angular.module('modulename').config(['$routeprovider','$controllerprovider',function($routeprovider,$controllerprovider){
angular.module('modulename').controllerProvider = $controllerProvider;
angular.module('modulename').routeprovider=$routeprovider;
$routeprovider.when('/',{
templateUrl: 'urlname',
controller: 'controllername',
resolve:{
'variable':variablenamewithvalue
}
}).otherwise({
redirectTo: '/'
});
}]);
You could try this:
module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);
'developer tip' 카테고리의 다른 글
| 목록에서 가장 오래된 / 가장 어린 datetime 개체 찾기 (0) | 2020.10.21 |
|---|---|
| 파이썬에서 두 목록을 사전으로 결합하려면 어떻게해야합니까? (0) | 2020.10.21 |
| C #에서 런타임에 DLL로드 (0) | 2020.10.21 |
| 고양이 방법 < (0) | 2020.10.21 |
| ASP.NET MVC 5에서 사용자 지정 인증을 구현하는 방법 (0) | 2020.10.21 |