如何合并我的控制器AngularJS？

Question

I have my MainCtrl(called from $routeProvider and also from html):

function MainCtrl($scope, $routeParams){
  //send data(see below) to AngularTemplate for apdate page
}

and I have my function, which fetch any data:

function getData($scope, $http){
  /*
  * Nav Data(here my navigate-structure fo site)
  */
  $http({method: 'GET', url: 'data/main.json'}).
  success(function(data){
    //work with data and send it to MainCtrl
  });
  /*
  * News Data(Here my news)
  */
  $http({method: 'GET', url: 'data/news.json'}).
  success(function(data){
    //work with data and send it to MainCtrl
  });
}

Now I understand how can I send my data from one Ctrl to other using .$on and .$broadcast. But getData is not Angular Controller(it is a js-function) and it doesn't understend my args($scope and $http). Tell me plese, how I can call getdata the first page load and send data to MainCtrl. And also if you know, tell me please what can I do with my MainCtrl, that he call only from $routeProvider. Now at first it called from html(ng-controller), and after from $routeProvider.

Answer 1

put the getData function inside angular controller. and it will understand the $scope and $http services

or make a protoype method set() of mainCtrl.... and pass $scope.var = value in it

       MainCtrl.prototype = {
        set = function(value){
            $scope=value;

         }

    }

Answer 2

Wrap your data fetching code in a service. Here are two good SO answers that show how to do this:

• https://stackoverflow.com/a/12513509/215945
• https://stackoverflow.com/a/14530508/215945

The examples above also show how to inject the service you create (eg, myService ) into a controller. You can inject this service into as many controllers as necessary. Since Angular services are singletons, there will only be one instance of your data fetching code, no matter how many controllers are injected with your service.

Your service can also cache the results of the $http request .