AngularAMD と RequireJS を初めて使用します。app.run() に 1 つのサービス (appService) を挿入しようとしていますが、エラーが発生しています:
不明なプロバイダー: appServiceProvider <- appService
main.js:
var bowerPath = 'bower_components/';
require.config({
baseUrl: "./",
/**
* Specify the abbreviation for the paths.
* **/
paths: {
'jquery': bowerPath + 'jquery-2.2.1.min/index',
'angularAMD': bowerPath + 'angularAMD/angularAMD.min',
'angular': bowerPath + 'angular/angular.min',
'ngRoute': bowerPath + 'angular-route/angular-route.min',
'ngResource': bowerPath + 'angular-resource/angular-resource.min',
'ui-bootstrap': bowerPath + 'angular-ui-bootstrap/dist/ui-bootstrap-tpls.min',
'ngGrowl': bowerPath + 'angular-growl-v2/build/angular-growl.min',
'ngAnimate': bowerPath + 'angular-animate/angular-animate.min',
'moment': bowerPath + 'moment/min/moment.min',
'ngProgress': bowerPath + 'ngprogress/build/ngprogress.min',
'shared': './shared',
'routeConfig': './shared/routeConfig',
'httpConfig': './shared/httpConfig',
'ngGrowlConfig': './shared/ngGrowlConfig',
'app': 'shared/app',
},
/**
* Specify the order of loading the dependancies
* **/
shim: {
"jquery": {
exports: "jquery"
},
"angular": {
exports: "angular"
},
"ngResource": {
deps: ["angular"],
exports: "ngResource"
},
"ui-bootstrap": {
deps: ["angular"],
exports: "ui-bootstrap"
},
"ngAnimate": ["angular"],
"ngRoute": ["angular"],
"angularAMD": ["angular"],
"ngGrowl": ["angular"],
"ngProgress": ["angular"],
},
/**
* Kick start the application
* **/
deps: ['app']
});
app.js:
define(['jquery', 'angular', 'angularAMD', 'ngRoute', 'ngResource', 'ui-bootstrap', 'routeConfig', 'httpConfig', 'ngAnimate', 'ngGrowlConfig', 'ngGrowl', 'ngProgress', , 'shared/app.service'],
function ($, ng, ngAMD, ngRoute, ngResource, uiBootstrap, routeConfig, httpConfig, ngAnimate, ngGrowlConfig, ngGrowl, ngProgress) {
var app = ng.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource', 'angular-growl', 'ngProgress']);
routeConfig(app);
httpConfig(app);
ngGrowlConfig(app);
app.run(["$http", "$rootScope", "$location", '$injector', function ($http, $rootScope, $location,$injector) {
appService = $injector.get('appService');
}]);
return ngAMD.bootstrap(app);
});
app.service.js
define(['app', 'ngProgress', 'shared/app.resource'],
function (app) {
'use strict';
app.service('appService', ['$q', 'appConstants', '$filter', 'ngProgressFactory', function ($q, appConstants, $filter, ngProgressFactory) {
//prevent closure.
var _self = this;
this.ngProgress = null;
this.ngProgressInig = function () {
_self.ngProgress = ngProgressFactory.createInstance();
}
}]);
});
編集:
app.js に次の変更を加えようとしました。
var appAmd = ngAMD.bootstrap(app);
app.run(["$http", "$rootScope", "$location", '$injector', function ($http, $rootScope, $location, $injector) {
appService = $injector.get('appService');
}]);
return appAmd;
そして今、私はエラーが発生しています:
TypeError: undefined のプロパティ 'service' を読み取れません(…)
アプリが定義されていないため、このエラーは app.service.js から発生しています。