AngularJS如何在工廠中獲取API

Question

我一直在搜索幾個小時，卻找不到我需要的東西。 有什么好心的人可以幫助我嗎？ 我試圖從我的控制器翻譯這樣的事情：

      myApp.controller('displayCatController', ['$scope','$http','$q', 'displayAll', function($scope, $http, $q, displayAll){


              var CombinedName = [];
              //Display auditoriums information
              var CategoryAudit  = $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4ODY2MTM3LCJleHAiOjE1MzkyOTgxMzcsIm5iZiI6MTUzODg2NjEzNywianRpIjoiOWZhMDVmZDUzNGRhNjU1ZDQ3YTgwODdmMGZkYjY1OGEifQ.2RbY7CGZY5hRfKZHVBels1XUDiAh9zU2lyUvePF8dXk'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                    $scope.auditoriums.splice(0,1);
                  }, function errorCallback(response) {
                    console.log(response);
                  });

              //Display exhibitions information
              var CategoryExhibit = $http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4ODY2MTM3LCJleHAiOjE1MzkyOTgxMzcsIm5iZiI6MTUzODg2NjEzNywianRpIjoiOWZhMDVmZDUzNGRhNjU1ZDQ3YTgwODdmMGZkYjY1OGEifQ.2RbY7CGZY5hRfKZHVBels1XUDiAh9zU2lyUvePF8dXk'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                    $scope.exhibitions.splice(0,1);
                        }, function errorCallback(response) {
                            console.log(response);
                        });


                // To combine all the $http API into one
                $q.all([CategoryAudit, CategoryExhibit, CategoryHotel]).then(function(){
                $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                // For loop to get only the names
                for (var i = 0; i < $scope.combine.length; i++){
                    if (i >= 0){
                        CombinedName.push($scope.combine[i].NAME);
                    }
                }

            });

      }]);

進入工廠，我可以在其中放置$ http調用以使其更清潔。 我真的很感謝您的幫助。

Answer 1

請參閱下面的示例代碼以了解工廠和控制器的用法。

 //Factory angular.module('myApp') .factory('dataFactory', ['$http', function($http) { var urlBase = '/api/customers'; var dataFactory = {}; dataFactory.getCustomers = function() { return $http.get(urlBase); }; return dataFactory; }]); //Controller angular.module('myApp') .controller('myController', ['$scope', 'dataFactory', function($scope, dataFactory) { $scope.customers; getCustomers(); function getCustomers() { dataFactory.getCustomers() .then(function(response) { $scope.customers = response.data; }, function(error) { console.log(error.message;) }); } } ]); 

Answer 2

為此，您只需編寫工廠功能並將代碼從控制器中分離出來。 請參考以下代碼。

 angular.module('myApp', []) .controller('displayCatController', ['$scope','MyService', function($scope, MyService){ // Display auditoriums information $scope.getCategoryAuditData = function(){ MyService.CategoryAudit().then(function (response){ $scope.CategoryAudit = response.data; }, function(error) { console.log(error) }); } // Display exhibitions information $scope.getCategoryExhibitData = function(){ MyService.CategoryAudit().then(function (response){ $scope.CategoryAudit = response.data; }, function(error) { console.log(error) }); } $scope.getCategoryAuditData(); $scope.getCategoryAuditData(); }]) .factory('MyService', function($http) { var factory = {}; factory.CategoryAudit = function() { return $http.get('https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4ODY2MTM3LCJleHAiOjE1MzkyOTgxMzcsIm5iZiI6MTUzODg2NjEzNywianRpIjoiOWZhMDVmZDUzNGRhNjU1ZDQ3YTgwODdmMGZkYjY1OGEifQ.2RbY7CGZY5hRfKZHVBels1XUDiAh9zU2lyUvePF8dXk'); } factory.CategoryExhibit = function() { $http.get('https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4ODY2MTM3LCJleHAiOjE1MzkyOTgxMzcsIm5iZiI6MTUzODg2NjEzNywianRpIjoiOWZhMDVmZDUzNGRhNjU1ZDQ3YTgwODdmMGZkYjY1OGEifQ.2RbY7CGZY5hRfKZHVBels1XUDiAh9zU2lyUvePF8dXk'); } return factory; }); 

 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script> </head> <body ng-controller="displayCatController"> <h1>Hello</h1> <hr> <h1>Response</h1> <p>{{CategoryAudit}}</p> <hr> <script type="text/javascript" src="displayCatController.js"></script> </body> </html> 

有關更多詳細信息和學習，請參考鏈接

希望這個能對您有所幫助...