angular js controller multiple injections - javascript

I have built the next controller:
.controller('myCtrl', function($scope, $route, $routeParams, $location)
now I want to inject something that's called SharedState. tried to:
.controller('chatCtrl' ['SharedState', function($scope, $route, $routeParams, $location, SharedState)
or:
.controller('chatCtrl' ['$scope','SharedState', '$route', '$routeParams', '$location', function($scope, SharedState, $route, $routeParams, $location)
both returns error:
Error: [ng:areq] http://errors.angularjs.org/1.2.27/ng/areq?p0=myCtrl&p1=not%20aNaNunction%2C%20got%20undefined
what is the correct way to achieve injection?

my second try:
.controller('chatCtrl', ['$scope','SharedState', '$route', '$routeParams', '$location', function($scope, SharedState, $route, $routeParams, $location)
with comma works.
thanks for helping! #Aprillion

Related

AngularJS TypeError is not a function

I have the following code in my service:
testApp.service('detailsService',['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http){
var details;
this.getDetails = function(name){
return $http({
method : "GET",
url : name
}).then(function(response) {
details= response.data;
console.log(response.data);
return response.data;
});
};
}]);
What i want to do is call this function in my controller when the page(view) is loaded.
testApp.controller('testController', ['$scope', '$location', 'databaseService','detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService){
$scope.details;
var selectedDetails = function(name){
detailsService.getDetails(name).then(function(data){
$scope.details= data;
});
};
selectedDetails(name);
}]);
I keep getting the error detailsService.getDetails is not a function.
I'm using the same function from the detailsService in another controller without any problems.
Does anybody know why i keep getting this error?
The error is expected as you are not injecting dependencies properly, You need to use the correct sequence.
testApp.controller('testController', ['$scope',
'$location',
'databaseService',
'detailsService',
'$routeParams',
function($scope, $location, databaseService, detailsService, $routeParams ){
instead of
testApp.controller('testController', ['$scope',
'$location',
'databaseService',
'detailsService',
'$routeParams',
function($scope, $location, databaseService, $routeParams, detailsService){
Note Both the string part and the function arguments need to match up 1:1.
remove the promise in the service.Just return the request. since you are catching the promise from the controller no need to use it in the service
testApp.service('detailsService', ['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http) {
var details;
this.getDetails = function(name) {
return $http({
method: "GET",
url: name
})
};
}]);
Also make sure the sequence is correct order when you are injecting services.
change this
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService )
to this
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams)
controller
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams) {
$scope.details;
var selectedDetails = function(name) {
detailsService.getDetails(name).then(function(data) {
$scope.details = data;
});
};
selectedDetails(name);
}]);
I got this error because I had added a callback method to a component, but the callback was not used by all the pages where that component was used:
<component [myCallbackFn]="fnNameToBindToFn">
component.ts:
public onClick() {
// some code
this.myCallbackFn();
}
Each time it was not used I got this error which was effectively a NullPointerException (from Java). So in the other uses of <component> in my website I had to add a check in the component before the callback to say:
if (undefined !== this.myCallbackFn) this.myCallbackFn();

AngularJS - controller and factory - where am I going wrong at include/inject functions?

I'm new to Angular and cannot pinpoint where I am going wrong. I'm just trying to simply inject my factory into my controller, reference said: "Cannot read property 'validar' of undefined". I have two files, ServiceUtil.js where have a service and CentroCustoCtrl.js where I'm trying to use service's function.
The function at ServiceUtil.js:
(function () {
'use strict';
angular.module('Services', [])
.service('ValidarFormulario', [function () {
this.validar = function (form) {
var valido = true;
//code
}
return valido;
}
}]);
})();
And CentroCustoCtrl.js
(function () {
'use strict';
var app = angular.module("start", ['AxelSoft', 'ngLocalize',
'ngLocalize.Config', 'mvComponentes','Services'])
.value('localeConf', {
basePath: '../Scripts/Locales', ...
...
});
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
$scope.Salvar = function () {
if (ValidarFormulario.validar(document.getElementsByTagName('input'))) { ...// Cannot read property 'validar' of undefined
);
I tried with factory , but not worked too:
angular.module('Services', [])
.factory('ValidarFormulario', [function () {
return{
validar : function (form) {
var valido = true;
//code
}
}
return valido;
}
}
}]);
})();
Please, I appreciate any help you can provide.
The problem is you had wrong dependency sequence inside DI inline array, basically they are mismatching in number and their sequences
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario',
//removed $rootScope, $timeout which wasn't used.
function ($scope, $http, ValidarFormulario) {
OR either way you could just add the dependency inside array, if they are really gonna used inside controller like below
app.controller('CentroCustoCtrl', ['$scope','$http','$rootScope','$timeout','ValidarFormulario',
function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
Just change the below line of code
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
to
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
This should work.
Well, also I've saw that your controller injections are wrong. You have:
App.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario)
And you should have:
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope,$timeout, ValidarFormulario)
Injectors on "[ ]" must mach with function parameters.
When you set a module the syntax is:
angular.module('Services', [ here injections ])
But when you get a module to use it, syntax must be:
angular.module('Services')

Redirect after X seconds AngularJS

I already saw this thread but it uses ui-router and I'm only using the $routeProvider of AngularJS. The code in the thread is:
.controller('SeeYouSoonCtrl', ['$scope', '$state', '$timeout',
function($scope, $state, $timeout) {
$timeout(function() {
$state.go('AnotherState');
}, 3000);
}])
How can I use it with my routeProvider since I am not using ui-router? Thank you in advance.
You need to use $location service
$location.path('/anotherURL');
By $location method :
code:
.controller('HomeController', ['$scope', '$state', '$location',
function($scope, $state, $location) {
$location.path('/appurl');
}])

angular module.run ReferenceError: $location is not defined

I want to AngularJS Change Path Without Reloading, look http://joelsaupe.com/programming/angularjs-change-path-without-reloading/
in core.js:
'use strict';
angular.module('App',['ngRoute'])
.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
var original = $location.path;
$location.path = function (path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function () {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
}]);
In controller:
angular.module('App')
.controller('DetailController', ['$scope', '$location', function($scope) {
$scope.changeURL = function(){
console.log("IN changeURL");
$location.path('/sample/gfshdfdsf', false);
};
}]);
If invoke changeURL, it will occur error:ReferenceError: $location is not defined
Can somebody help me? Thanks!
$location is not injected in the controller, so just change
.controller('DetailController', ['$scope', '$location', function($scope)
to
.controller('DetailController', ['$scope', '$location', function($scope, $location)
I was getting the same error and I deleted the $rootScope from the definitions. After that it worked. No idea why.
Not working
app.factory("OrganizationService",
['$q', '$http', '$log', '$location', '$rootScope', '$timeout', 'LoadSubscriptionsService', 'LoadRolesService',
function($scope , $http, $log, $location, $cookies, $rootScope, $timeout) {
Working
app.factory("OrganizationService",
['$q', '$http', '$log', '$location', '$timeout', 'LoadSubscriptionsService', 'LoadRolesService',
function($scope , $http, $log, $location, $cookies, $timeout) {

Undefined service in controller

I have a service and a controller declared like this:
angular
.module('purchaseApp')
.service('sharedProperties', function() {
var stringValue = 'test string value';
return {
getString: function() {
return stringValue;
}
}
})
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
When I try to access to the service in my controller, it returns me "undefined", but I don't know why... Could you help me?
Thanks.
Your controller is missing sharedProperties. You need to inject it. Add it after $http.
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', 'sharedProperties', function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', **'sharedProperties'**, function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
Add sharedProperties service in your controller dependent parameter as well.

Categories

Resources