CODEWITHSUNDEEP
javascriptangularjscordovaphonegap-plugins
Sebas
Sebas

Reputation: 55

How do you add a service in Angular so a controller can use it?

I have a basic angular setup. I want to add another factory service so that the mainCtrl can use it.

Here is my controller.js

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

Here is my 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';
        };
    }]);

Here is my 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: '/'});
    });

I get the following error:

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

It is a cordova phonegap setup with basic routes. I am new to angular. I have looked over the internet and im having trouble setting up a basic service to hold all my data so i can access it from all my routes. Any help would be appreciated.

Upvotes: 2

Views: 83

Answers (1)

Glenn Ferrie
Glenn Ferrie

Reputation: 10410

You will need to identify your services as a dependency of the controller.

The first step is to make sure you define the services before the controller.

then change the controller code so that it names the services as a dependency. 

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

Hope this helps!

Upvotes: 2

Related Questions