如何在 Angular 中添加服务以便控制器可以使用它？

Posted 2023-03-07

【中文标题】如何在 Angular 中添加服务以便控制器可以使用它？

【英文标题】：How do you add a service in Angular so a controller can use it?

【发布时间】：2015-08-28 17:41:02

【问题描述】：

我有一个基本的角度设置。我想添加另一个工厂服务，以便 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

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

【参考方案1】：

您需要将您的服务标识为控制器的依赖项。

第一步是确保在控制器之前定义服务。

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

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

希望这会有所帮助！

【讨论】：

很确定 manaFactory 也需要声明为依赖项 :)

谢谢！我已经像这样将它添加到控制器中。但它仍然错误。我不需要将其添加到路线中吗？