Angularjs從控制器移動邏輯

Question

如何將此功能從控制器移動到單獨的文件中？

這可能是一個簡單的問題，但我試圖做到這一點與服務和工廠，但我一直在做錯依賴注入或服務或工廠的語法。

這是控制器：

angular.module("myApp", []) 
 
.controller('myAppCtrl', function ($scope, $http) { 
 

 
    (function() { 
 
     //the function to be moved 
 
     //do somthing 
 
    })(); 
 

 
    $scope.data = {}; 
 

 
    $http.//......do something else 
 

 
});

Answer 1

plunkr：（在OP的請求代替真實API鏈路）

HTML：

<div ng-app="myApp"> 
    <div ng-controller="myAppCtrl"> 
    <ul> 
    <li ng-repeat="product in data.products" ng-bind="product.name"></li> 
    </ul> 
    </div> 
</div> 

的Javascript：

angular.module("myApp", []) 
    .constant("dataUrl", "https://some-link.com") 
    .controller('myAppCtrl', function($scope, corsService) { 
    $scope.data = {}; 
    corsService.getData().then(function(data) { 
     $scope.data.products = data; 
    }).catch(function(error) { 
     $scope.data.error = error; 
    }); 
    }); 

angular.module("myApp") 
    .factory('corsService', function($http, dataUrl) { 
    return { 
     getData: getData 
    } 

    function corsRequestEnabler() { 
     //Enable CORS requests 
    }; 

    function getData() { 
     corsRequestEnabler(); 
     return $http.get(dataUrl) 
     .then(function(response) { 
      console.log('Response', response); 
      return response.data; 
     }, function(error) { 
      return error 
     }) 
    } 
    }); 

Answer 2

var app=angular.module("myApp", []); 

app.controller('myAppCtrl', function (corsService, $scope, $http, dataUrl )   { 

corsService(); 


app.factory('corsService' ,function($http){ 

var data = {}; 

$http.get(dataUrl) 
.success(function (data) { 
    data.products = data; 
    console.log(data); 
}) 
.error(function (error) { 
data.error = error; 
}); 
return data; 
}); 

});