API，angularJS，獲取數據

我從來沒有完成angularJS從我的生活，我迷路了。API，angularJS，獲取數據

所以我已經完成了這個文件，從一個api獲取數據與時間的過濾器。

forecast.js

 (function() { 

angular.module('application').factory('Forecast', ['$http', '$q', function($http, $q){ 

    var ApiAddr = "api.com/"; 


    forecast.getResults = function(timeStart, timeEnd){ 
    // We map application varaible names with API param names 
    var httpParams = { 
     type: "global", 
     time: "minute", 
     tsmin: timeStart, 
     tsmax: timeEnd 
    }; 
    return $http.get(apiAddr, { 
     params: httpParams, 
     cache: true 
    }).then(function(data){ 
     return data; 
    }, 
      function(response){ 
       console.log(
      "HTTP request "+ApiAddr+ 
      " (with parameters tsmin="+httpParams.tsmin+", tsmax="+httpParams.tsmax+ 
      ", type="+httpParams.type+", time="+httpParams.time+ 
      (httpParams.motive ? ", motive="+httpParams.motive : "")+ 
      (httpParams.vector ? ", vector="+httpParams.vector : "")+ 
      (httpParams.media ? ", media="+httpParams.media : "")+ 
      ") failed with "+response.status 
     ); 
     return $q.reject(response); 
     } 
    ); 
}];

但我不知道做一個控制器適配器連接到此。我可以做什麼類型的控制器？每個例子都基於一個固定的json文件，沒有參數。此外，我想，在HTML中輸入時間過濾器，但我總是不知道該怎麼做。我看到的例子是獲取數據，不發送。 Ps：我已經做了2天的研究，我從來沒有在我的生活中做過前端編程。

來源

2017-03-17 TotorAndMimine

要發送'的HttpParams '給你api？ –

是的。和數據（時間）來自一個HTML頁面，我希望控制器操縱獲得的數據以便在HTML頁面上輸出。 – TotorAndMimine

請注意[成功/錯誤]（https://docs.angularjs.org/api/ng/service/$http）已過時，不僅不再支持，而且如果使用angular 1.6或更高版本，則不再包含它們。而是在一個或兩個回調中使用'then'。 – Igor

(function() { 
 

 
    angular.module('application', []) 
 
    .factory('Forecast', ['$http', '$q', function($http, $q) { 
 
     var apiaddress = 'api.com'; 
 
     var forecast = {}; 
 

 
     forecast.getResults = function(timeStart, timeEnd) { 
 
     // We map application varaible names with API param names 
 
     var httpParams = { 
 
      type: "global", 
 
      time: "minute", 
 
      tsmin: timeStart, 
 
      tsmax: timeEnd 
 
     }; 
 
     return $http.get(apiaddress, { 
 
      params: httpParams, 
 
      cache: true 
 
     }).then(function(result) { 
 
      return result.data; 
 
     }); 
 
     }; 
 

 
     return forecast; 
 

 
    }]) 
 
    .controller('SampleCtrl', ['$scope', 'Forecast', function($scope, Forecast) { 
 
     $scope.forecastReport = ''; 
 

 
     $scope.getForecast = function() { 
 
     Forecast.getResults($scope.timeStart, $scope.timeEnd) 
 
      .then(function(report) { 
 
      $scope.result = report; 
 
      }).catch(function(err) { 
 
      $scope.result = ''; 
 
      console.error('Unable to fetch forecast report: ' + err); 
 
      }); 
 
     }; 
 
    }]); 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="application" ng-controller="SampleCtrl"> 
 
    <label>Time Start: 
 
    <input type="text" ng-model="timeStart"/></label> 
 
    <label>Time End: 
 
    <input type="text" ng-model="timeEnd"/></label> 
 
    
 
    <button ng-click="getForecast()">Get Forecast</button> 
 
    <hr/> 
 
    <div> 
 
    <b>Forecast Result:</b> 
 
    </div> 
 
    <pre>{{forecastReport | json}}</pre> 
 
</div>

來源

2017-03-17 14:51:33

謝謝，代碼工作！ – TotorAndMimine

@TotorAndMimine你可以標記爲已解決。如果你對這個答案滿意 –

只是一個小問題：在控制器中，你初始化timeStart和timeEnd，或者我想要在html頁面中輸入值。我做了這樣的事情： input type =「datetime-local」ng-model ='timeStart'> – TotorAndMimine

只需注入出廠到您的控制器是這樣的：

var app = angular.module('application'); 
app.controller('myController', 
     ['$scope', 'Forecast', function($scope, Forecast) { /* access to Forecast*/}]);

或者與組件（清潔劑）：

app.component('myComponentCtrl', { 
     templateUrl: 'template.html' 
     controller: myComponentCtrl 
}) 


myComponentCtrl.$inject = ['$scope', 'Forecast']; 

function myComponentCtrl($scope, Forecast) {/* ... */ }

來源

2017-03-17 14:47:48 opp

API，angularJS，獲取數據

回答

相關問題