Develop Reference

Dynamic loading Angular Controller

I am trying to load controllers dynamically using ocLazyLoad :
$ocLazyLoad.load('./ctrls/login.js');
But am getting this error saying:
The controller with the name 'loginCtrl' is not registered.
angular.module('optimusApp')
.controller('loginCtrl', function ($scope, $rootScope, $location, $http) {});
app.js
angular.module("optimusApp", ['ngRoute', 'oc.lazyLoad']);
angular.module('optimusApp')
.controller('globalCtrl', function ($rootScope, $location, $http, $routeParams, $ocLazyLoad) {
$ocLazyLoad.load('./ctrls/login.js');
});

I made it work by using ng-if
app.js
var optimusApp = angular.module("optimusApp", ["ngRoute", "oc.lazyLoad"])
.controller("globalCtrl", function ($rootScope, $location, $http, $routeParams, $ocLazyLoad) {
$ocLazyLoad.load("./js/app/login.js").then(function() {
console.log("loginCtrl loaded");
$rootScope.loginActive = true;
}, function(e) {
console.log("error");
});
});
login.js
optimusApp.controller('loginCtrl', function ($scope, $rootScope, $location, $http) {
});
HTML
<div ng-if="loginActive" ng-controller="loginCtrl">
</div>
Basically you will get the "registration error" if your ng-controller is in the page before you have the JS loaded.
So the ng-if is a solution, or I see you have ngRoute. So you could set ocLazyLoad to load the controller when entering a specific state.

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')

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.