javascript - 如何在 Angular 中添加服务以便 Controller 可以使用它？

Question

我有一个基本的 Angular 设置。我想添加另一个工厂服务，以便 mainCtrl 可以使用它。

这是我的 controller.js

angular.module('Manalator.controllers', [])
    .controller('MainCtrl', ['$scope', function ($scope, manaFactory) {
        manaFactory.testString();
    }]);

这是我的services.js

angular.module('Manalator.services', [])
    .factory('cordovaReady', [function () {
        return function (fn) {
            var queue = [],
                impl = function () {
                    queue.push([].slice.call(arguments));
                };

            document.addEventListener('deviceready', function () {
                queue.forEach(function (args) {
                    fn.apply(this, args);
                });
                impl = fn;
            }, false);

            return function () {
                return impl.apply(this, arguments);
            };
        };
    }])
    .factory('manaFactory', [function(){
        this.testString = function(){
          return 'This works';
        };
    }]);

这是我的 routes.js

angular.module('Manalator', ['ngRoute', 'Manalator.services', 'Manalator.controllers'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'MainCtrl',
                templateUrl: 'partials/pages/main.html'
            })
            .when('/devotion', {
                controller: 'MainCtrl',
                templateUrl: 'partials/pages/devotion.html'
            })
            .when('/results', {
                controller: 'MainCtrl',
                templateUrl: 'partials/pages/results.html'
            })
            .otherwise({redirectTo: '/'});
    });

我收到以下错误:

TypeError: Cannot read property 'testy' of undefined
    at new <anonymous> (controllers.js:3)
    at Object.i [as invoke] (main.min.js:1)
    at $get.f.instance (main.min.js:2)
    at m (main.min.js:1)
    at s (main.min.js:1)
    at $get.e (main.min.js:1)
    at main.min.js:1
    at p.$get.p.$eval (main.min.js:3)
    at p.$get.p.$apply (main.min.js:3)
    at main.min.js:1

这是一个带有基本路由的 cordova phonegap 设置。我是 Angular 新手。我查看了互联网，我无法设置基本服务来保存我的所有数据，因此我可以从我的所有路线访问它。任何帮助将不胜感激。

Answer 1

您需要将您的服务标识为 Controller 的依赖项。

第一步是确保在 Controller 之前定义服务。

然后更改 Controller 代码，以便将服务命名为依赖项。

angular.module('Manalator.controllers', ['Manalator.services'])
.controller('MainCtrl', ['$scope', function ($scope, manaFactory) {
    manaFactory.testString();
}]);

希望这对您有所帮助!