2017-12-23 1 views
0

Ich versuche Code zu erstellen, der Dienste (Factory) und ngResource verwendet, um eine Anfrage an einen REST-fähigen Dienst zu senden, der optionale Aktionen ausführt und sendet basierend auf Geschäftslogik.Übergeben von mehreren Argumenten vom Controller zum Factory-Service REST-Aufrufe und Zurückgeben von (optionalen) Daten

Ich bin mir einer Frage bewusst, die über etwas Ähnliches spricht, das bei Passing multiple parameters from controller to factory in angularjs gefunden wird. Ich habe Probleme, es für mich zu arbeiten, und es gibt auch einen Mangel an Erklärung.

Ich schreibe dies zu verstehen, wie es funktioniert, Best Practice und so gibt es ein Repository, das für Anfänger wie mich in Zukunft gut ist. Keine Respektlosigkeit an den Autor der Lösung oben angegeben, aber es wird davon ausgegangen wahrscheinlich ein Maß an Klugheit habe ich doch nicht erreicht ;-)

geht hier:

Mein Controller

swof.controller('scheduleController', ['$scope', '$log', '$http', '$filter','moment', 'scheduleServicePeriod', function($scope, $log, $http, $filter, moment, scheduleServicePeriod) { 
 

 
    $scope.name = 'scheduleController::set default values and provide function to generate new schedule'; 
 
    $log.info('Controller: '+ $scope.name); 
 
    $scope.years = ["2017", "2018", "2019","2020","2021","2022"]; 
 
    $scope.selectedYear = "2017"; 
 
    $scope.selectedPeriod = Math.ceil(moment().format('w')) | 1 ; 
 
    $scope.genSchedule = function() 
 
    { 
 
    // when button is pressed function 'genSchedule' is called that either has default value for selectedYear and selectedPeriod or one user has selected. This bit works 
 
    scheduleServicePeriod.post({ s_year: $scope.selectedYear, s_period: $scope.selectedPeriod }).$promise.then(function(data){ 
 
     $scope.schedulegen = data; 
 
     $scope.genScheduleResponse=moment().format('h:mm:ss a') + " " + data.message; 
 
    }, function(data) { 
 
     $log.error();('Error: ' + data); 
 
    })}; 
 

 
}]);

Meine Fabrik Service

swof.factory('scheduleServicePeriod', function($resource) 
 
{ 
 
    var data = $resource('/api/schedules/period/:s_year/:s_period',{s_year: "@s_year",s_period: "@s_period" }, 
 
    { 
 
    'post': 
 
    { 
 
     method: 'POST', 
 
     params: {}, 
 
     isArray:true 
 
    } 
 
    }); 
 
    return data; 
 
});

Mein RESTful Web Service

router.route('/schedules/period/:schedule_year/:schedule_period') 
 

 
    .post(function(req,res) 
 
    { 
 
     // create record 
 
     var query = getEngineerIDs(); 
 
     var jsonMessage = "Success: Generated schedule for year = " + req.params.schedule_year + " and period starting week number = " + req.params.schedule_period ; 
 

 
     console.log(parseInt(req.params.schedule_period%2),parseInt(req.params.schedule_period)); 
 

 
     query.exec(function(err,records) 
 
     { 
 
     if(err) return console.log(err); 
 
     var results = SwfFn.populateCalendar(SwfFn.assignEngineers(records),+ 
 
         req.params.schedule_year,req.params.schedule_period); 
 
     if (results.length == 0 ) { 
 
      jsonMessage = "Failed: Start year/week in past"; 
 
     } 
 
     console.log(jsonMessage); 
 
     for (var count in results) 
 
     { 
 
      Schedule.findOneAndUpdate (
 
      { ymd: results[count].ymd, shift: results[count].shift }, 
 
      results[count], 
 
      {upsert: true, new: true, runValidators: true}, 
 
      function (err,res) { if (err) res.send(err); } 
 
     ); 
 
     } 
 
     res.json({message: jsonMessage }); 
 
     }); 
 

 
    })

Was

  1. Die Werte (Standard oder auf andere Weise) erreichen die Funktion genSchedule passiert.
  2. Die Werte, die den REST-Service erreichen, sind 'undefiniert' 'undefiniert'
  3. Das Problem ist mit dem Werksservice.
  4. Es gibt eine ähnliche Lösung, die ich nicht funktionieren muss (oben)
  5. Ich bin mir bewusst, dass Sie nur einen JSON von Controller zu Service senden sollten, aber ich bin nicht sicher, wie man es auf der Fabrikseite behandelt .
  6. Ich kann (noch) nicht den Abrufteil zum Laufen bringen, aber das kann jetzt warten.

Schätzen Sie die Hilfe!

+0

Etwas gefunden bei https://docs.angularjs.org/api/ngResource/service/$resource. Ich lese es immer noch, denke aber, dass es etwas anders adressiert, was ich will (wie Code strukturiert ist). – GerM

Antwort

0

Es hat tatsächlich funktioniert! Was ich falsch gemacht habe, war die falschen Werte auszudrucken, wenn ich console.log zum Debugging benutzte und die Art und Weise, wie ich die Antwortnachricht in der Benutzeroberfläche angezeigt habe.

Zusammenfassend ich einen API-Aufruf entlang der Linien von POST/api/Plänen/Zeit machen will //

Der Aufruf hat eine Berechnung und sendet eine Antwort, die ich auf den Endbenutzer angezeigt werden soll zurück der Bildschirm.

Hier ist der Arbeitscode, der noch verbessert werden kann, aber ein ziemlich gutes Beispiel für grundlegende Anwendungsfälle ist. Die Syntax zum Senden der Parameter ist ziemlich einfach, wenn Sie dem Beispiel folgen, um eine logische Schlussfolgerung zu ziehen.

-Controller

swof.controller('scheduleController', ['$scope', '$log', '$http', '$filter','moment', 'scheduleServicePeriod', function($scope, $log, $http, $filter, moment, scheduleServicePeriod) { 
 

 
    $scope.name = 'scheduleController::set default values and provide function to generate new schedule'; 
 
    $log.info('Controller: '+ $scope.name); 
 
    $scope.years = ["2017", "2018", "2019","2020","2021","2022"]; 
 
    $scope.selectedYear = "2017"; 
 
    $scope.selectedPeriod = Math.ceil(moment().format('w')) | 1 ; 
 

 
    $scope.genSchedule = function() 
 
    { 
 
    scheduleServicePeriod.post({ s_year: $scope.selectedYear, s_period: $scope.selectedPeriod }).$promise.then(function(data){ 
 
     $scope.schedulegen = data; 
 
     $scope.genScheduleResponse=moment().format('h:mm:ss a') + " " + data.message; 
 
    }, function(data) { 
 
     $log.error();('Error: ' + data); 
 
    })}; 
 

 
}]);

Werkservice

swof.factory('scheduleServicePeriod', function($resource) 
 
{ 
 
    var data = $resource('/api/schedules/period/:s_year/:s_period',{s_year: "@s_year",s_period: "@s_period" }, 
 
    { 
 
    'post': 
 
    { 
 
     method: 'POST' 
 
    } 
 
    }); 
 
    return data; 
 
});

RESTful Anruf

router.route('/schedules/period/:schedule_year/:schedule_period') 
 

 
    .post(function(req,res) 
 
    { 
 
     // create record 
 
     var query = getEngineerIDs(); 
 
     var jsonMessage = "Success: Generated schedule for year/period [" + req.params.schedule_year + "/" + req.params.schedule_period +"]" ; 
 

 
     query.exec(function(err,records) 
 
     { 
 
     if(err) return console.log(err); 
 
     var results = SwfFn.populateCalendar(SwfFn.assignEngineers(records),+ 
 
         req.params.schedule_year,req.params.schedule_period); 
 
     if (results.length == 0 ) { 
 
      jsonMessage = "Failed: Start year/week in past"; 
 
     } 
 
     for (var count in results) 
 
     { 
 
      // Write record to Mongo using upsert; if records for future date already 
 
      // here then overwrite them otherwise insert. This is ok since the period 
 
      // is in the future 
 
      Schedule.findOneAndUpdate (
 
      { ymd: results[count].ymd, shift: results[count].shift }, 
 
      results[count], 
 
      {upsert: true, new: true, runValidators: true}, 
 
      function (err,res) { if (err) res.send(err); } 
 
     ); 
 
     } 
 
     res.json({message: jsonMessage }); 
 
     console.log(jsonMessage); 
 
     });

Web-Seite

<div> 
 
    <h3>Generate</h3> 
 
<h4>Generate schedule for future periods</h4> 
 
<p>Select year and week start period to generate a schedule for future support slots. Previously generated values will be lost. You cannot generate a scheule for periods in the past or the current period we are in.</p> 
 
<form name="scheduleGenerate"> 
 
    <select ng-model="selectedYear" ng-options="x for x in years"></select> 
 
    Start Week (1-51 [odd numbers]): 
 
    <input ng-model="selectedPeriod" type="number" name="genperiod" placeholder="1" min="1" max="51" step="2" onkeydown="return false"> 
 
    <input type="button" class="click" id="click" value="Generate" ng-click="genSchedule()"> 
 
    <label class="control-label"> {{ genScheduleResponse }}</label> 
 
</form> 
 
</div>

Hoffe jemand findet das nützlich.

+0

Mein Code für all dies finden Sie unter https://github.com/gmanroney/supportsscheduler. Ich benutze diese "Produkt" Idee als eine Möglichkeit für mich, nodejs, angularjs zusätzlich zu html5, css3 und einigen Web-Frameworks zu lernen. Fühlen Sie sich frei, einen Blick darauf zu werfen. Ich versuche zu kommentieren, um es sinnvoll und nützlich für jeden zu machen, der darauf zugreifen möchte ... – GerM

Verwandte Themen