angularjs - 使用 RequireJS 的 Angular 服务注入

Question

我将 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() {}

        }

    });

});

应用程序.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，但不能因为我不断收到“无法实例化模块 MyApp”错误消息。

我尝试按如下方式加载登录服务文件：

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

});

但后来我有另一个错误，指出应用程序在登录服务中未定义。

非常感谢您的帮助。

大卫

Answer 1

之所以发生这种情况，是因为“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

Answer 2

问题是由动态加载文件的事实引起的，requireJS这可以确保文件在运行代码之前已经加载。

您应该执行以下操作：

1. ng-app从您的 html中删除

2. 使用手动引导：

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