时间戳

首页 > 解决方案 > 使用 require.js 创建 angular.js 服务的未知提供程序错误

angularjs - 使用 require.js 创建 angular.js 服务的未知提供程序错误

问题描述

我正在尝试使用 AMD 加载和 require.js 使服务正常工作。我的控制器都在工作，并且可以加载 $rootScope 来存储应用程序范围的变量/数据，但我还想添加一些方法来在需要时修改或刷新一些应用程序范围的数据。因此我试图在 require.js 中创建一个服务对象

所以我创造了这样的东西：

我的服务.js

define( ["angular"], function (angular) {
    var MyService = function($scope, $rootScope) {
        this.$scope = $scope;
        this.$rootScope = $rootScope
    }
    MyService.$inject = ["$scope"];
    MyService.prototype = {
        constructor: MyService,
        // comma separated list of methods and properties
    }
    return MyService
})

我同样定义了几个控制器（都已经正常工作），然后在我的 require.js 配置中访问它们，例如：

requirejs(
    [ "angular", "MyService", "MyController" ],
    function(angular, MyService, MyController) {
        let myAppHandle = angular.module('myApp',[])
            .service("myService", ['$scope','$rootScope', MyService])

        // the following throws an error:

        //     angular.js:15697 Error: [$injector:unpr]
        //         Unknown provider: $scopeProvider <- $scope <- myService

        myAppHandle.controller('MyController', ['$scope', 'myService', MyController])
    }
)

任何帮助表示赞赏

标签： angularjsrequirejs

解决方案

啊，我在黑暗中猜测如何在 require.js 中正确创建服务，经过一些修补和敲击键盘后，我最终发现问题不在于控制器获取服务，而在于服务获得 $scope

我为 require.js 找到的示例主要处理控制器、组件和指令，并且几乎在每种情况下，$scope 都是传入的第一件事。

我将 $scope 从定义中的 .service() 和类的构造函数中取出，它现在可以工作了。

define( ["angular"], function (angular) {
    var MyService = function($rootScope) {
        // using $rootScope to store app-wide variables
        //   accessible directly or via this service
        //   potentially updated/populated by methods in this service
        this.$rootScope = $rootScope
    }
    MyService.prototype = {
        constructor: MyService,
        // comma separated list of methods and properties
    }
    return MyService
})

和

requirejs(
    [ "angular", "MyService", "MyController" ],
    function(angular, MyService, MyController) {
        let myAppHandle = angular.module('myApp',[])
            .service("myService", ['$rootScope', MyService])

        myAppHandle.controller('MyController', ['$scope', 'myService', MyController])
    }
)

作为参考，这是控制器的样子：

define( ["angular"], function (angular) {
    var MyController = function($scope, myService) {
        this.$scope = $scope
        // make service handle available as class property
        this.myService = myService
    }
    MyController.$inject = ["$scope"];
    MyController.prototype = {
        constructor: MyController,
        // comma separated list of methods and properties
    }
    return MyController
})

（希望这可以节省其他人我花了 2-3 个小时来解决这个问题的时间）

推荐阅读