2

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 から発生しています。

4

0 に答える 0