Angularでは$routeProvider、config関数に注入できます
module.config(function ($routeProvider) {
});
自分のサービスを次のように注入したい
module.config(function ($routeProvider, myService) {
});
unknown myServiceサービスが適切に定義されていることは確かですが、次のように注入すると、イベントが発生するという例外がスローされます。
module.config(function ($routeProvider, $http) {
});
それはまだ言いunknown $httpます。
なぜなのかご存知ですか？
モジュールページの「モジュールのロードと依存関係」セクションから：
構成ブロック-プロバイダーの登録および構成フェーズで実行されます。プロバイダーと定数のみを構成ブロックに挿入できます。これは、サービスが完全に構成される前に、サービスが誤ってインスタンス化されるのを防ぐためです。
実行ブロック-インジェクターが作成された後に実行され、アプリケーションをキックスタートするために使用されます。実行ブロックに注入できるのは、インスタンスと定数のみです。これは、アプリケーションの実行時にシステムがそれ以上構成されないようにするためです。
したがって、独自のサービスや$ httpなどの組み込みサービスをconfig（）に注入することはできません。代わりにrun（）を使用してください。
以下に示すように、(サービスからとしましょう) 依存関係を注入して、ルート (.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 への注入時のみ、プロバイダーの名前を後置する必要はありません)。
それがあなたの一部にとって物事をより簡単にすることができれば。
この回答で説明されているようにProvider、カスタム サービスに追加するだけで、 を使用して内部関数にアクセスできます$get()。
これは最もクリーンなソリューションではないかもしれませんが、機能します。
module.config(function ($routeProvider, myServiceProvider) {
// Call a function hello() on myService.
myServiceProvider.$get().hello();
});
これを試すことができます：
module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);