API、angularJSは、件のデータにすべての私の人生から

Question

私は決して行わ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); 
     } 
    ); 
}]; 

しかし、私はこれに、コントローラアダプタを作るためには考えています。どのようなタイプのコントローラーができますか？ すべてのexempleは、パラメータを持たない固定jsonファイルに基づいています。

はまた、私は、時間フィルタを入力プログラムするためにHTMLに、したいが、私はば完全にこれのために何をすべきかの見当がつかない。私が見た例では、データを取得し、送信する必要はありませんでした。

シモンズ：私はこのことについて、研究の2日間を作った、私は私の人生の中でフロントエンドプログラミングをやったことがありません。

Answer 1

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

Answer 2

ただ、このようなあなたのコントローラに工場を注入：あなたは `httpParamsを送りたい

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


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

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