How to call a controller from another file in 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