AngularJS如何在工厂中获取API

Question

I have been searching for hours and hours and couldn't find something that I need. Can any kind soul out there please help me out? I am try to translate something like this from my controller :

      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);
                    }
                }

            });

      }]);

into a factory where I can place my $http call in there to make it cleaner. I would really really appreciate any help.

Answer 1

Refer below sample code for factory and controller usage..

 //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

For that you have just write factory function and separate out the code from your controller. Refer the below code.

 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> 

For more detail and learning refer Link

Hope this will help you...