使用 Requirejs 在 Angularjs 中包含依赖项时出错答案

【问题标题】：Error to include dependency in Angularjs with Requirejs使用 Requirejs 在 Angularjs 中包含依赖项时出错
【发布时间】：2014-03-19 12:27:21
【问题描述】：

Angularjs 上服务的前端部分，现在我尝试将其配置为与 Requirejs 一起使用。

我需要解决 app.js 中的依赖关系

'application/services/P48Wallet'

在 P48Wallet.js 中我需要解析 Http.js

define(['application/app', 'application/services/Http'], function(app) {

在 Http.js 中，当我尝试返回 app.factory 时

return app.factory('Http', function($http, $q, $location, $rootScope) {

我收到一个错误： 未捕获的类型错误：无法调用未定义 Http.js 的方法“工厂”

console.log(app); // undefined

怎么了？为什么在 Http.js 中未定义应用程序

================================================ ====================================

项目结构

static()

    js()
        application()
            controllers()
                Main.js
            directives()
                ...
            filters()
                ...
            services()
                Http.js
                P48Wallet.js
            views()
                main.html
            app.js
            main.js
        libs()
            angular.min.js
            ....

================================================ ====================================

index.html

<!DOCTYPE html>
<html>
    <head>
        <script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>

        <script type="text/javascript">
            var server_url = '{$HTTP_STATIC_PATH}';
        </script>
    </head>
    <body>
        <div class="loader_cover" loader="{literal}{{showLoader}}{/literal}"><div class="loader_img"></div></div>
        <div class="page" ng-view></div>
    </body>
</html>

================================================ ====================================

app.js

define(
[
    'angularAMD',
    'angular-route',
    'angular-animate',
    'application/services/P48Wallet'
],
function (angularAMD) {

    var app = angular.module('Order', ['ngRoute', 'ngAnimate']);

    app.config(function($routeProvider){

        $routeProvider
            .when('/',
                angularAMD.route({
                    templateUrl: 'static/js/application/views/main.html',
                    controller: 'application/controllers/Main',
                    resolve: {
                        deposits:
                            function(P48Wallet) {
                                return P48Wallet.getUserDeposits();
                            }
                    }
                })
            )

            .otherwise({redirectTo: '/'});
    });

    angularAMD.bootstrap(app);

    return app;
});

================================================ ====================================

main.js

require.config({

baseUrl: "static/js",

paths: {
    'angular':          'libs/angular.min',
    'angular-route':    'libs/angular-route.min',
    'angular-animate':  'libs/angular-animate.min',
    'angularAMD':       'libs/angularAMD.min'
},

shim: {
    'angularAMD': ['angular'],
    'angular-route': ['angular'],
    'angular-animate': ['angular']
},

deps: ['application/app']
});

================================================ ====================================

Controller Main.js

define(['application/app'], function (app) {

'use strict';
app.controller('Main', function ($rootScope, $location) {

    var Main = {};

    return $rootScope.Main = Main;
});
});

================================================ ====================================

服务

1) Http.js

'use strict';

define(['application/app'], function(app) {

return app.factory('Http', function($http, $q, $location, $rootScope) {

    return HTTP = {
        xxx: '/',
        xxx: false
    };
});
});

2) P48Wallet.js

'use strict';

define(['application/app', 'application/services/Http'], function(app) {

console.log(app); //undefined
return app.factory('P48Wallet', function(Http) {

// ...

    return this;
});
});

【问题讨论】：

您为app.js 显示的代码包含不平衡的括号和圆括号。也许你从一个更大的片段中缩写了你的代码。执行此操作并避免粘贴到不平衡的问题代码中的一个好方法是将文件保存为不同的名称，并使用显示此类问题的编辑器对其进行编辑。当您发现没有问题时，然后您可以将其粘贴到您的问题中。
修复不平衡的括号和圆括号。但是我还是不明白，怎么了，为什么会报错？
你能在你的 index.html 中包含所有的
更新所有 index.html

标签： angularjs dependencies requirejs

【解决方案1】：

这可能与我刚刚回答的另一个问题重复：

angularjs + requirejs + dependency in resolve

简而言之：

在使用angularAMD.route 时不应定义resolve 属性，而应定义controller 和controllerUrl。请参阅angularAMD.route 的文档。
由于您的 Http.js 和 P48Wallet.js 在引导后被调用，您应该使用 app.register... 来定义这些服务。

你真的需要阅读AngularJS' Providers，因为return HTTP = {...} 在你的Http.js 中没有任何意义。

【讨论】：