How to call a controller from another file in AngularJS? - angularjs

Question

Let's say I have the following files:
JS1 file:
var app = angular.module('myApp', []);
app.controller('myCtrlOfJs1', function ($scope, $http) {
$http.post("url", data).success(function(data, status) {
$scope.hello = data;
})
})
JS2 file:
var app = angular.module('myApp', []);
app.controller('myCtrlOfJs2', function ($scope, $http) {
// $http.post("url", data).success(function(data, status) {
// $scope.hello = data;
// })
})
What I don't want is rewrite the same code twice. Then I want to call that function in my JS1 file, in the JS2 file. Is it possible?
PS: It's only an example, my code has much more lines than it.
Any help is appreciated. Thanks.

Answer 1

You can always use services: https://docs.angularjs.org/guide/services
app.factory('commonFeatures', function($http) {
return {
setHelloMsg: function(scope) {
$http.post("url", data).success(function(data, status) {
scope.hello = data;
})
}
};
});
app.controller('myCtrlOfJs1', function ($scope, commonFeatures) {
commonFeatures.setHelloMsg($scope);
});
edit:
As a response to your comment:
Well, it can be located nearly everywhere. Have a look at https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility. There are more style guides, but I personally follow this one and it just makes sense.
Your view doesn't have to change at all.

Answer 2

In general, you want to separate common functionality like this out into angular services: https://docs.angularjs.org/guide/services
In this example it might look like this:
var andyModule = angular.module('anyModule', []);
andyModule.factory('helloDataService', function($http) {
var helloDataService = {
// returns a promise
getHelloData = function() {
return $http.post("url", data)
}
};
return shinyNewServiceInstance;
});
And in your controller
app.controller('myCtrlOfJs1', function ($scope, $http, helloDataService) {
helloDataService.getHelloData().success((data)=> {
$scope.data = data;
})
})

Answer 3

I would abstract this to a service. Services are particularly good spots for things like network calls.
By the way using angular.module("app", modules) syntax will create an app named app, so JS2 file will overwite the module from JS1. I doubt you intend this.
angular.module("app", []);
var app = angular.module('myApp');
app.controller('myCtrlOfJs1', function ($scope, hello) {
hello.post().then(data => scope.$hello = data);
});
var app = angular.module('myApp');
app.controller('myCtrlOfJs2', function ($scope, hello) {
hello.post().then(data => scope.$hello = data);
});
app.factory("hello", function ($http) {
// set data somehow
return {
post() {
return $http.post("url", data);
},
};
});
This still duplicates the scope.$hello code which may be what you want to avoid. In this case you can extend from another controller that implements this either using newer class syntax or through the prototype. In this case I think it would be better to use controllerAs instead of $scope.

Answer 4

This is a method you can achieve what you are looking for.
I prefer the service method though
Take a look at this :
use case for $controller service in angularjs
https://docs.angularjs.org/api/ng/service/$controller
Hope it helps