angularjs + requirejs +的决心依赖 [英] angularjs + requirejs + dependency in resolve

问题描述

我怎样才能更正注入依赖P48Wallet的决心为$ routeProvider？

app.js

 使用严格的;定义（
[
    angularAMD'，
    角航线」，
    角动画
]
功能（angularAMD）{VAR应用= angular.module（'FilmOrder'，['ngRoute'，'ngAnimate']）;的app.config（['$ routeProvider'，函数（$ routeProvider）{    $ routeProvider
        。什么时候（'/'，
            angularAMD.route（{
                templateUrl：静态/ JS /应用/视图/ main.html中，
                控制器：应用程序/控制器/主'，
                解析：{
                     电影：
                     需要（['应用程序/服务/ P48Wallet'，函数（P48Wallet）{
                         返回P48Wallet.getUserData（）;
                     }]）
                }
            }）
        ）        。当（'/成功'，
                angularAMD.route（{
                templateUrl：静态/ JS /应用/视图/ success.html'，
                控制器：应用程序/控制器/成功
            }）
        ）        不然的话（{redirectTo：'/'}）;
    }]）;    angularAMD.bootstrap（应用）;    返回程序;
}）;
 

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

P48Wallet.js

 使用严格的;定义（['应用程序/应用程序，应用程序/服务/ HTTP']，功能（应用程序）{    返回app.factory（'P48Wallet'，函数（HTTP）{        this.getUserData =功能（）{
            返回Http.post（'行动= GET_DATA？'）;
        };        返回此;
    }）;
}）;
 

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

我收到错误：

 错误：[$喷油器：unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=dProvider%20%3C-%20d
 

解决方案

2的问题，我可以看到：

1. angularAMD.route 设置解析属性，因此它是覆盖
   在决心你正在设置。


2. 返回app.factory 期望的对象是回报，而不是这个

你应该做的是定义 P48Wallet 作为工厂/服务，然后将其添加到依赖关系到你的主控制器。例如：

应用程序/服务/ P48Wallet.js

编辑：添加功能从每评论发表缓存返回的数据。

 定义（['应用程序/应用程序，应用程序/服务/ HTTP']，功能（应用程序）{
    app.register.service（'P48Wallet'，函数（HTTP，$ Q）{
        VAR priv_data;        //假设你的Http的工作方式相同$ HTTP
        this.getUserData =功能（）{
            变种D = $ q.defer（）;            如果（priv_data）{
                //返回的缓存值
                d.resolve（priv_data）;
            }其他{
                Http.post（'？行动= GET_DATA'）
                。然后（功能（数据）{
                    priv_data =数据;
                    d.resolve（数据）;
                }）
                .catch（功能（错误）{
                    d.reject（错误）;
                }）;
            }
        };        返回d.promise;
    }）;
}）;
 

应用程序/控制器/ Main.js

 定义（['应用程序/应用程序，应用程序/服务/ P48Wallet']，功能（应用程序）{
    app.register.controller（MainController，[
        '$范围，P48Wallet'，函数（$范围，P48Wallet）{...}
    ]）;
}）;
 

应用程序/ app.js

  //藏在心里相同，除了
angularAMD.route（{
    templateUrl：静态/ JS /应用/视图/ main.html中，
    controllerUrl：应用程序/控制器/主'，
    控制器：'MainController
}）
 

下面是angularAMD对文档如何设置懒负载控制器的路线：

https://github.com/marcoslin/angularAMD#on-按需加载-的控制器

How I can correct inject dependency P48Wallet in resolve for $routeProvider?

app.js

'use strict';

define(
[
    'angularAMD',
    'angular-route',
    'angular-animate'
],
function (angularAMD) {

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

app.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/',
            angularAMD.route({
                templateUrl: 'static/js/application/views/main.html',
                controller: 'application/controllers/Main',
                resolve: {
                     films:
                     require(['application/services/P48Wallet', function(P48Wallet) {
                         return P48Wallet.getUserData();
                     }])
                }
            })
        )

        .when('/success',
                angularAMD.route({
                templateUrl: 'static/js/application/views/success.html',
                controller: 'application/controllers/Success'
            })
        )

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

    angularAMD.bootstrap(app);

    return app;
});

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

P48Wallet.js

'use strict';

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

    return app.factory('P48Wallet', function(Http) {

        this.getUserData = function() {
            return Http.post('?action=get_data');
        };

        return this;
    });
});

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

I receive error:

Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=dProvider%20%3C-%20d

解决方案

2 problems that I can see:

1. angularAMD.route sets the resolve property so it is overwriting the resolve that you are setting up.
2. return app.factory expect an object to be return and not this

What you should be doing is define the P48Wallet as a factory/service and then add it to the dependency to your Main controller. For example:

application/services/P48Wallet.js

EDIT: Adding feature to cache the returned data from POST per comment.

define(['application/app', 'application/services/Http'], function(app) {
    app.register.service('P48Wallet', function(Http, $q) {
        var priv_data;

        // Assuming that your Http works the same way as $http
        this.getUserData = function() {
            var d = $q.defer();

            if (priv_data) {
                // Return cached value
                d.resolve(priv_data);
            } else {
                Http.post('?action=get_data')
                .then(function (data) {
                    priv_data = data;
                    d.resolve(data);
                })
                .catch(function (error) {
                    d.reject(error);
                });
            }
        };

        return d.promise;
    });
});

application/controllers/Main.js

define(['application/app', 'application/services/P48Wallet'], function (app) {
    app.register.controller("MainController", [
        '$scope', 'P48Wallet', function ($scope, P48Wallet) { ... }
    ]);
});

application/app.js

// Keeping everything the same except
angularAMD.route({
    templateUrl: 'static/js/application/views/main.html',
    controllerUrl: 'application/controllers/Main',
    controller: 'MainController'
})

Here is angularAMD's documentation on how to setup the route to lazy load controllers:

https://github.com/marcoslin/angularAMD#on-demand-loading-of-controllers

这篇关于angularjs + requirejs +的决心依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！