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>

有关更多详细信息和学习方法，请参考Link

希望这对您有帮助...

AngularJS如何在工厂中获取API

2 个答案: