Develop Reference

AngularJS $inject error in service injection

I'm newbie in Angular, so will be glad if you can help me.
I split my logic on 2 files (controllers and services).
My services code:
(function () {
'use strict';
angular
.module('app', [])
.factory('authservice', authservice);
authservice.$inject = ['$http', '$logger'];
function authservice($http, $logger) {
return {
signInOwner: signInOwner,
signUpOwner: signUpOwner
};
function signInOwner(owner) {
}
function signUpOwner(owner) {
}
};
})();
My controller code:
(function () {
'use strict';
angular
.module('app', [])
.controller('SignUpController', SignUpController);
SignUpController.$inject = ['authservice'];
function SignUpController (authservice) {
var vm = this;
}
})();
I include my services.js before controller.js but still got error about wrong authservice dependencies
angular.js:14362 Error: [$injector:unpr]
Could you help me, please?

Using this synthax angular.module('app', []), you are overwriting the module creation.
You should use angular.module('app') to retrieve it instead.
[] should be use only once: at the creation of the module.
From the Angular module doc:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.

In your controller code replace:
angular
.module('app', [])
.controller('SignUpController', SignUpController);
for
angular
.module('app') // notice the lack of [] here!!
.controller('SignUpController', SignUpController);
This is because with the [] it means you're creating the module and without it it means you're locating the module. Since the module was created when your where creating your service, you don't need to create it again, just locate it.

app breaks when run on android version 4.4.2, throws Error: [ng:areq]

When i use ionic run ,my app routes to discover.html on start which invokes DiscoverCtrl which throws the error :
Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=DiscoverCtrl&p1=not%20a%20function%2C%20got%20undefined
but when i route to AnsweredCtrl it loads properly and there is no issue there.
Also this happens only in versions lower than api level 22.When i run the app in a higher version it runs smoothly and throws no error . I can't figure if it is an ionic issue or while building the app . I have tried reducing minSdk in config.xml but that didnt help either.Maybe i am making a rookie mistake. Thanks in advance for your help
discover.controller.js
(function () {
'use strict';
angular
.module('app.discover')
.controller('DiscoverCtrl', DiscoverCtrl);
DiscoverCtrl.$inject = ['$scope', 'ConnectivityMonitor', 'serverPath', '$stateParams', 'EndUser', '$timeout', '$compile', 'localStorageService', '$ionicHistory', 'cdnPath'];
function DiscoverCtrl($scope,ConnectivityMonitor,serverPath,$stateParams,EndUser,$timeout,$compile,localStorageService,$ionicHistory,cdnPath) {
var vm = this;
ConnectivityMonitor.startWatching();
$scope.somefunction = function(){};
}
})();
answered.controller.js
(function () {
'use strict';
angular
.module('app.answered')
.controller('AnsweredCtrl', AnsweredCtrl);
AnsweredCtrl.$inject = ['ConnectivityMonitor','serverPath','$scope','QuestionService','$timeout','$compile', 'localStorageService', 'cdnPath', 'QuestionListService'];
function AnsweredCtrl (ConnectivityMonitor,serverPath, $scope, QuestionService, $timeout, $compile, localStorageService, cdnPath, QuestionListService) {
var vm = this;
$scope.somefunction = function(){};
}
})();
app.js
angular.module('exy', [
'app.core', // contains external services
'app.discover',
'app.answered'
])

ok i figured out the problem , In one of my function i was using 'let'in my for loop,so older webview didn't support let , removed it and it got fixed.

This error is thrown because the definition for your DiscoverCtrl is not correct. This can be caused by any of below reasons:
You are accessing the module app.discover without defining it first. Make sure that the module was defined before this controller definition using: angular.module('app.discover', []) syntax
Your dependencies are not correct resulting in incorrect controller definition.
This may also be possible if you don't specify the app name in ng-app directive
The probable cause should be first one. Make sure 1.) you are defining the module correctly and 2.) not defining it twice

Inject $rootscope into services module

How would I inject $rootscope into wenzey.services so it is accessible across my application?
(function () {
'use strict';
/**
*
*/
angular
.module('wenzey.services', '$rootScope', [])
$rootScope.type = "consumer";
})();
This is the error message I am currently getting:
Uncaught ReferenceError: $rootScope is not defined
Uncaught Error: [$injector:modulerr] Failed to instantiate module wenzey due to:
Error: [$injector:modulerr] Failed to instantiate module wenzey.services due to:
Error: [ng:areq] Argument 'modulesToLoad' is not an array

You are using wrong definition for a module. You are mixing a module with a service. You need to understand the below to use them properly:
You specify a module as a dependency of other module in module definition. E.g.
angular
.module('wenzy.services', [])
.factory('AppService', function () {
// Add methods
});
Now you can use the module wenzy.services as a dependency while defining module wenzy.controllers as below:
angular
.module('wenzy.controllers', ['wenzy.services']);
You inject a service in another service/ controller while defining the service/ controller . E.g. We have injected the service AppService in the AppController below
angular
.module('wenzy.controllers', ['wenzy.services'])
.controller('AppController', function (AppService) {
// Add controller defintion
})
The $rootScope is a service provided by angular and can be injected into any service/ controller. You don't need to add that as part of module definition.

Can't inject factory service from another module in angularjs

I am new to angularjs.
I am trying to build a mobile application inspired from modular approach defined here:
http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/
Now I am trying to create a service using factory method in one of my modules core. I have another module called home. Now when I try to inject service from core to home, I get an error:
Error: [$injector:unpr] Unknown provider: glue.core.geoLocationServiceProvider <- glue.core.geoLocationService
I have searched through internet and here. None of the solutions are working for me.
the code of my home module's controller is:
define([
'../module',
'../namespace',
],
function(module, namespace) {
'use strict';
var name = namespace + ".homeController";
var dependencies = ['$scope', '$http', '$ionicLoading', 'glue.core.geoLocationService'];
var controller = function($scope, $http, $ionicLoading, core) {
}
module.controller(name, dependencies.concat(controller));
});
I have also uploaded the project here on github: https://github.com/neerajsohal/test/tree/development
Any help would be great. I am going mad with this.

Angular dependencies and provider not available error

I am loading a file upload script I found on Github
<script type="text/javascript" src="{% static 'bower_components/angular-file-upload/angular-file-upload.min.js' %}"></script>
and have a data import module :
(function () {
'use strict';
angular
.module('TestSite.import', [
'TestSite.import.controllers'
]);
angular
.module('TestSite.import.controllers', ['angularFileUpload']);
})();
as well as a controller
(function () {
'use strict';
angular
.module('TestSite.import.controllers' , ['angularFileUpload'])
.controller('UploadController', UploadController);
UploadController.$inject = ['$scope','angularFileUpload'];
/**
* #namespace UploadController
*/
function UploadController($scope, FileUploader) {
$scope.uploader = new FileUploader();
};
})();
And I am getting an error
Error: [$injector:unpr] Unknown provider: angularFileUploadProvider <- angularFileUpload
I am confused about the module declaration and DI. Why do I need to declare the module TestSite.import.controllers twice? I am injecting the right dependencies (angularFileUpload) and still getting that error, also what is a provider and why cant angular find it?

Looks like you confused name of the file upload service. Correct dependency injection looks like this:
angular
.module('TestSite.import.controllers')
.controller('UploadController', UploadController);
UploadController.$inject = ['$scope', 'FileUploader'];
/**
* #namespace UploadController
*/
function UploadController($scope, FileUploader) {
$scope.uploader = new FileUploader();
};
Also note, that you don't have to redefine module TestSite.import.controllers. To access already registered module you need to use getter notation, meaning no dependency array as the second parameter:
.module('TestSite.import.controllers').controller(...);