In order to streamline my code, I decided to create a service for a function that is utilized in multiple controllers.
To achieve this, I added a commonService.js file to my index.html
'use strict';
var myApp = angular.module('myAppName');
myApp.service(['loadHttpService', '$window', '$http', function (loadHttpService, $window, $http) {
this.loadHttpService = function (url) {
...
};
return $http.jsonp(url, {
params: {
callback: "JSON_CALLBACK"
}
})
.then(function (response) {
...
});
};
}]);
I then proceeded to use this service in my homeController by including it as a dependency:
'use strict';
angular.module('Home')
.controller('HomeController', ['$scope', '$rootScope', '$http', '$window', '$state', 'loadHttpService',
function ($scope, $rootScope, $http, $window, $state, loadHttpService) {
...
var url = "http://xxx";
loadHttpService.loadHttp(url);
}]);
However, I encountered an error message https://docs.angularjs.org/error/$injector/unpr?p0=loadHttpServiceProvider%20%3C-%20loadHttpService%20%3C-%20HomeController
I am unsure why this error is occurring and how to resolve it. Any tips on improving this setup would be greatly appreciated, as I am relatively new to angularjs.
Please note: myAppName is the name of my app (used in ng-app).