Question

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) {

我收到错误消息： 未捕获的TypeError：无法调用方法＆＃39; factory＆＃39;未定义的Http.js

console.log(app); // undefined

什么错了？为什么app在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;
});
});

Answer 1

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

angularjs + requirejs + dependency in resolve

简而言之：

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

您真的需要在return HTTP = {...}上阅读，Http.js {{1}}没有任何意义。

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

1 个答案: