Dependencies Injection error in modules - angularjs

I have the module of my application:
angular.module('app', ['app.controllers','app.routes','app.services']);
I have my services module:
angular.app('app.services', [])
.factory('usuarioService', ['$rootScope', 'renderService',
function($rootScope, renderService){
// logic of factory
}]);
angular.module('app.services', [])
.factory('renderService', ['$http',
function($http){
// logic of factory
}]);
and I have my controller:
angular.module('app.controllers', ['app.services'])
.controller('meuCtrl',
['$scope','$rootScope','usuarioService','renderservice',
function($scope, $rootScope, usuarioService, renderService){
// logic of controller
}]);
But to run the application, I get dependencies injection error:
Unknown provider: usuarioServiceProvider <- usuarioService <- meuCtrl
I do not understand what might be going on, as do the injection into appropriate location.
unless I'm doing wrong these injections.
PS .: All .JS files are being loaded into index.html, none have been forgotten.

Your usuarioService factory declaration is incorrectly adding itself to a non-existent member of the angular object.
You have:
angular.app('app.services', []) // note the 'app' usage
.factory('usuarioService', ['$rootScope', 'renderService',
You should have
angular.module('app.services', []) // note the 'module' usage
.factory('usuarioService', ['$rootScope', 'renderService',

Try this
angular.module('app.services')
.factory('renderService', ['$http', function($http) {
//logic
return renderService;
}]);
angular.module('app.services')
.factory('usuarioService', ['$rootScope', 'renderService',function($rootScope,renderService) {
//logic
return renderService;
}]);
angular.module('app.controllers', ['app.services'])
.controller('meuCtrl',
['$scope','$rootScope','usuarioService','renderservice',
function($scope, $rootScope, usuarioService, renderService){
// logic of controller
}]);

Related

Angular depandency problems at minify compiling

I have an app which uses a lot of different js files. When I compile the app normaly with gulp everything works well, but when I compile everything in one file to minify it, I get an error (Uncaught Error: [$injector:modulerr]).
app-55bb2aca73.js:4 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…http%3A%2F%2Flocalhost%3A8080%2Fbuild%2Fjs%2Fapp-55bb2aca73.js%3A4%3A30075)
at app-55bb2aca73.js:4
...
Here is my gulpfile.js (use Laravels elexir plugin):
mix.scripts([
/*libs*/
'../../../node_modules/jquery/dist/jquery.slim.min.js',
'../../../node_modules/bootstrap/dist/js/bootstrap.min.js',
'../../../node_modules/angular/angular.min.js',
'../../../node_modules/angular-cookies/angular-cookies.min.js',
'../../../node_modules/pickadate/lib/compressed/picker.js',
'../../../node_modules/pickadate/lib/compressed/picker.date.js',
'../../../node_modules/pickadate/lib/compressed/picker.time.js',
'app.js',
'config/*.js',
'angular/controller/*.js'
], 'public/js/app.js');
Here the app.js:
var app = angular.module("app", ['ngCookies'], function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
For example here the begin of a controller:
app.controller('someCtrl', function ($scope, $window, $http, $cookies) {
Someone got any idea why this is not working in one file?
When you minify, the controller method names get stripped out. Need to include in this way to have a reference:
app.controller('someCtrl', ['$scope', '$window', '$http', '$cookies'
function ($scope, $window, $http, $cookies) {
// ...
}
]
More here: https://docs.angularjs.org/guide/di
This might be because the system angular uses for injecting dependencies according to the names of the variables passed as parameters. If you are minifying your files into a single one and variables are not keeping the same original name, you should inject the dependencies manually as follow:
var myApp = function ($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
myApp.$inject = ['$interpolateProvider'];
angular.module("app", ['ngCookies'], myApp);
... and in your controller:
app.controller('someCtrl', controlFn);
var controlFn = function ($scope, $window, $http, $cookies) {};
controlFn.$inject = ['$scope', '$window', '$http', '$cookies'];

Error: $injector:unknown provider

My service:
angular.module('app').factory('keretHttpSrv', function ($http, $state, $scope, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
My controller,
angular.module('app.dashboard')
.controller('DashboardCtrl',
['$scope', 'keretHttpSrv', function ($scope, keretHttpSrv)
{
/*some code*/
}])
I have this error:
Error: $injector:unknown provider
How can I solve this problem?
there is no $scope for a factory
FIX
angular.module('app').factory('keretHttpSrv', function ($http, $state, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
You are adding the 'keretHttpSrv' factory to the 'app' module and adding the 'DashboardCtrl' controller to the 'app.dashboard' module. To access the factory you will have to either inject the 'app' module into 'app.dashboard' when you define it
angular.module('app.dashboard', ['app']);
or put both the factory and the controller in the same module
//first define the module
angular.module('app', []);
angular.module('app').factory('keretHttpSrv', function ($http, $state, $scope, $rootScope, $q, $localStorage) {
/*some code*/
return keretHttpService;
})
angular.module('app')
.controller('DashboardCtrl',
['$scope', 'keretHttpSrv', function ($scope, keretHttpSrv)
{
/*some code*/
}])
do you need to use routing here
you have two option :
angular.module("app",['ngRoute']);
it is lib in angular but the second option is better
2.angular.module("app",['ui.router']);
after you need to config the provider of $state in
angular.module("app",['ui.router']).config(function($stateProvider,...){};
all about ui router u can read here UI ROUTER
and see example here Examples

AngularJS - use custom service within controller

What is the correct way to inject a service into a controller in Angular?
I have written a service and i’d like to use it in my controllers. But i keep getting an error. Maybe it would be easy for someone to spot my mistake…
authController.js
(function() {
'use strict';
angular
.module('authApp')
.service('authService', function($auth, $state, $http, $rootScope, envService, $scope) {
// some code
})
.controller('SignupController', SignupController, ['$scope', 'authService’]);
function SignupController($http, $scope, $rootScope, $location, envService, authService) {
// want to use my authService here
}
...
At this point I get the following error :
angular.js:12477 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- authService
What is wrong with the way I have injected authService into my signupController??
Thanks.
You have an error declaring your controller. Declaring a controller with the array syntax receives the name of the controller as a String as first parameter, and an array as a second parameter. The last element of the array must be the a function with all the controller logic. That function must have as many parameters as previous elements in the array itself. In your case it should be something like:
(function() {
'use strict';
angular
.module('authApp')
.service('authService', function($auth, $state, $http, $rootScope, envService, $scope) {
// some code
})
.controller('SignupController', ['$http', '$scope', '$rootScope', '$location', 'envService', 'authService', function ($http, $scope, $rootScope, $location, envService, authService) {
// Use your authService here
}]);
...
You can check the styleguide to write your controllers, services and inject your dependencies in a better way.

Angular how to include $http when minifying JS

Since I'm minifying and uglifying my JS, I can't simply do the following:
var app = angular.module('app', []);
app.controller('MyController', function($scope, $http) {
// ...
});
It will throw an inject-related error since minifying it jumbles up the $scope var.
Instead, I have to do this:
app.controller('MyController', ['$scope', function($scope) {
$scope.angularIs = "awesome";
}]);
Question: Using the second approach, how do I add the http service? Something like this?
app.controller('MyController', ['$scope&$http', function($scope, $http) {
// ...
}]);
And can my angular.module('app', []); declaration stay the same, or do I have to add some type of http dependency to the []'s? Thanks!
You can just use:
app.controller('MyController', ['$scope', '$http', function($scope, $http) {
// ...
}]);
It will match then against the arguments inside function(). Your app's dependencies will always be strings, so those will be fine when minified.
use this:
app.controller('MyController', ['$scope','$http', function($scope, $http) {
// ...
}]);

How do I use an injected angular module's service in my app?

I'm venturing into injecting different angular modules into my app. One module I created contains a service that I would like to inject into a controller. Does anyone have a good explanation of how to do this?
My app.js:
angular.module('myApp', ['ngRoute', 'myModule']);
myModule which contains a service I want to inject:
angular.module('myModule')
.factory('coolService', ['$rootScope', function ($rootScope) {
return {
// API calls
}]);
An example of how to correctly inject 'coolService' into this controller would answer my question nicely:
angular.module('myApp')
.controller('myController', ['$scope', function ($scope) {
...
}]);
angular.module('myApp')
.controller('myController', ['$scope', 'coolService', function ($scope, coolService) {
coolService.do...
}]);
thats all...

Resources