将多个参数从控制器传递到工厂服务,从而进行REST调用并返回(可选)数据

时间:2017-12-23 23:20:10

标签: javascript angularjs node.js rest ngresource

我正在尝试创建使用服务(工厂)和ngResource的代码,以便向执行和操作的RESTful服务发送请求,并根据业务逻辑发回可选结果。

我知道有一个问题涉及Passing multiple parameters from controller to factory in angularjs处发现的类似问题。我在让它为我工作时遇到了问题,但也缺乏解释。

我写这篇文章是为了了解它是如何工作的,最佳实践,所以有一个存储库对未来的新手有好处。对上面提供的解决方案的作者没有不尊重,但它可能假设我还没有达到一定的聪明程度; - )

这里是:

我的控制器

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

}]);

我的工厂服务

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

我的RESTful Web服务

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

    })

会发生什么

  1. 值(默认或其他)到达函数genSchedule。
  2. 到达RESTful服务的值是'undefined''undefined'
  3. 问题在于工厂服务。
  4. 有一个类似的解决方案,我没有工作(上图)
  5. 我知道你应该只从控制器发送一个JSON到服务,但我不知道如何在工厂端处理它。
  6. 我不能(还)让检索部分工作,但现在可以等待。
  7. 感谢帮助!

1 个答案:

答案 0 :(得分:0)

它确实有效!我在做错的是在使用console.log进行调试时打印出错误的值以及我在UI中显示响应消息的方式。

总结一下,我希望按照以下方式进行API调用 POST / api / schedule / period //

呼叫进行计算并发回我想在屏幕上显示最终用户的响应。

这里的工作代码仍然可以改进,但对于基本用例来说却是一个相当不错的例子。如果您按照示例进行逻辑推理,则发送参数的语法相当简单。

<强> 控制器

&#13;
&#13;
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);
    })};

}]);
&#13;
&#13;
&#13;

工厂服务

&#13;
&#13;
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;
});
&#13;
&#13;
&#13;

RESTful call

&#13;
&#13;
  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);
      });
&#13;
&#13;
&#13;

网页

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

希望有人觉得这很有用。