Angular 使用 RequireJS 的服务注入

Angular service injection using RequireJS

我正在为单页应用程序使用 AngularAMD + RequirsJS,但在 app.js 文件中注入服务时遇到了一些问题。

这里是代码:

login_service.js

define(['app'], function(app) {
'use strict';

    app.service('loginService', function($location, $state, Restangular) {

        return {

            login: function(data, scope) {},

            logout: function() {},

            isLogged: function() {}

        }

    });

});

app.js

define(['angularAMD', 'restangular', 'angular-ui-router'], function(angularAMD) {
'use strict';

    var app = angular.module('MyApp', ['restangular', 'ui.router', 'loginService']);

    app.run(function($rootScope, $state, $stateParams, $location, loginService) {

        console.log(loginService)

        /*
        Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr] 
        Failed to instantiate module loginService due to:
        $injector:nomod] Module 'loginService' is not available! You either misspelled the module name or forgot to load it.
         */

    });

    app.config(function($stateProvider, $urlRouterProvider, $i18nextProvider, RestangularProvider) {

    });

});

我想在 运行 函数中访问 loginService,但不能,因为我不断收到 "Failed to instantiate module MyApp" 错误消息。

我尝试加载登录服务文件如下:

define(['angularAMD', 'restangular', 'angular-ui-router', 'services/login_service'], function(angularAMD) {

});

但是我又遇到另一个错误,指出登录服务中未定义该应用程序。

非常感谢您的帮助。

大卫

它正在发生,因为 'loginService' 不是一个模块,它是一个服务,您不能将 'loginService'(服务)添加到模块中,您只能将模块添加到另一个模块中。 你可以做一件事:-

 var app = angular.module('loginService',[]);
app.service('loginService', function($location, $state, Restangular) {

        return {

            login: function(data, scope) {},

            logout: function() {},

            isLogged: function() {}

        }

    });

Ps:- 我不确定:-P

问题是由 requireJS 动态加载文件这一事实引起的,这向您保证在运行代码之前文件已经加载。

您应该执行以下操作:

  1. 从您的 html

  2. 中删除 ng-app
  3. 使用手动引导:

        angular.element().ready(function(){
            angular.bootstrap(document,['MyApp']);
    
        });