Basic angular service malfunctioning

Question

Basic angular service malfunctioning

I've been trying to create an angular service but seem to be having trouble with it. I've attempted various solutions and searched extensively for answers. Any assistance would be greatly appreciated.

 //service 

angular
    .module('RDash')
    .factory('googleLogin', googleLogin); 

function googleLogin() 
{
    this.testFunc = function () 
    {
        console.log("THIS IS A TEST SERVICE");
    }
};

Below: Attempting to call the testFunc from the service

//controller

angular
    .module('RDash')
    .controller('ComposeCtrl', ['$scope','$rootScope','$http','googleLogin', ComposeCtrl]);

function ComposeCtrl($scope, $rootScope, $http, googleLogin) {
    console.log("ComposeCTRL active");

    googleLogin.testFunc(); // encountering an error stating "main.min.js:2 Error: [$injector:undef] http://errors.angularjs.org/1.5.8/$injector/undef?p0=googleLogin"

I suspect the issue lies in injecting the service, but I'm not quite sure where. Any insights or guidance would be much appreciated. Thank you.

javascript angularjs

Answer 1

Answer №1

When setting up a factory in Angular, it is important to return the function reference and declare a variable testFunc. To understand why, you can find the answer here.

Make sure to update the working snippet below.

angular.module('RDash', []);
angular
  .module('RDash')
  .factory('googleLogin', googleLogin);

function googleLogin() {
  var testFunc = function() {
    console.log("THIS IS A TEST SERVICE");
  }
  return {
    testFunc : testFunc
  }
};

angular
  .module('RDash')
  .controller('ComposeCtrl', ['$scope', '$rootScope', '$http', 'googleLogin', ComposeCtrl]);

function ComposeCtrl($scope, $rootScope, $http, googleLogin) {
  console.log("ComposeCTRL active");

  googleLogin.testFunc();
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="RDash" ng-controller="ComposeCtrl"></div>

angular
   .module('RDash')
   .factory('googleLogin', googleLogin);

 function googleLogin() {

   var testFunc = function() {
     console.log("THIS IS A TEST SERVICE");
   }

   return {
     testFunc: testFunc
   }

 };

Answer 2

When setting up a factory in Angular, it is important to return the function reference and declare a variable testFunc. To understand why, you can find the answer here.

Make sure to update the working snippet below.

angular.module('RDash', []);
angular
  .module('RDash')
  .factory('googleLogin', googleLogin);

function googleLogin() {
  var testFunc = function() {
    console.log("THIS IS A TEST SERVICE");
  }
  return {
    testFunc : testFunc
  }
};

angular
  .module('RDash')
  .controller('ComposeCtrl', ['$scope', '$rootScope', '$http', 'googleLogin', ComposeCtrl]);

function ComposeCtrl($scope, $rootScope, $http, googleLogin) {
  console.log("ComposeCTRL active");

  googleLogin.testFunc();
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="RDash" ng-controller="ComposeCtrl"></div>

angular
   .module('RDash')
   .factory('googleLogin', googleLogin);

 function googleLogin() {

   var testFunc = function() {
     console.log("THIS IS A TEST SERVICE");
   }

   return {
     testFunc: testFunc
   }

 };

Basic angular service malfunctioning

Answer №1

Similar questions

Searching for a particular Prettier setting

What is the reason for the text not being written continuously in the textfield?

Different Option for Single-spa

Can I use the mouseover event on an image to display a sibling div?

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

"What's the best way to update the src attribute of an iFrame when a user clicks

TinyMCE is deleting Bold tags in a numbered list when saving a form

JavaScript - Image style alterations are not operating as expected

What is the purpose of using the variable "header_row || 1" in App Script?

Reload the page when the value reaches 1

How is it that my initial response appears correct in the first log, but then suddenly changes to a 1?

Is it true that URL parameters can be found in two distinct locations within this.props in react-router?

Convert JSON data into HTML using Angular.js's ng-shodown directive

Consistently navigating back to the Home Page through AJAX

After the initial rendering, JQuery can dynamically search through the DOM elements and seamlessly replace keys with their respective values

JQuery horizontal navbar hover animations

When attempting to install font-awesome with meteor npm, the module 'fontawesome'" was not found

javascript extract data from JSON

Use angular-resource to add a new entry to the db.json file

Effective ways to conduct Protractor testing on angular-ui-Selectize components