Как адаптер IBM MobileFirst интегрируется с Angular JS?

Question

Я использую IBM MobileFirst + Ionic + AngularJS, чтобы создать программу, которая ищет клиента по имени и отображает результат в таблице.

Давайте сказал, что я есть адаптер:

<wl:adapter name="customerAdapter" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:wl="http://www.ibm.com/mfp/integration" 
xmlns:sql="http://www.ibm.com/mfp/integration/sql"> 
<displayName>customerAdapter</displayName> 
<description>customerAdapter</description> 
<connectivity> 
    <connectionPolicy xsi:type="sql:SQLConnectionPolicy"> 
    <dataSourceDefinition> 
     <driverClass>oracle.jdbc.driver.OracleDriver</driverClass> 
      <url>jdbc:oracle:thin:@//10.128.2.155:1521/MyDB</url> 
      <user>admin</user> 
      <password>admin</password> 
     </dataSourceDefinition> 
    </connectionPolicy> 
</connectivity> 
<procedure name="searchCustomerByIC"/> 
<procedure name="searchCustomerByNM"/> 
<procedure name="searchCustomerByICandNM"/> 

и это реализация: (для searchCustomerByNM)

var statementSearchCustomerByNM= WL.Server.createSQLStatement("select CUST_NM,CUST_NIRC,CUST_GENDER from TB_CUSTOMER where CUST_NM like UPPER(?) "); 
function searchCustomerByNM(customerName) { 
    return WL.Server.invokeSQLStatement({ 
     preparedStatement : statementSearchCustomerByNM, 
     parameters : [new String("%" + customerName + "%")] 
    }); 
} 

Адаптер работает хорошо.

Вот мой GUI код:

<ion-view view-title="Customer"> 
<ion-content> 
<div id = "pageCustomer"> 
    <div class="list"> 
     <label class="item item-input"> 
     <input type="text" placeholder="Customer Name" ng model="customerName"> 
     </label> 
     <label class="item item-input"> 
     <input type="text" placeholder="Customer IC" ng-model="customerIc"> 
     </label> 
     <button class="button button-full button-positive" ng-click="customerSearch(customerName)"> 
     Search Customer 
    </button> 
    </div> 
    <hr> 
    <table id="myTable" cellpadding="5" align="center" > 
    <thead> 
    <tr> 
     <th data-priority="2">Name</th> 
     <th data-priority="1">NIRC</th> 
     <th data-priority="persist">Gender</th> 
     <td></td> 
    </tr> 
    </thead> 

     <tr ng-repeat="x in customers"> 
     <td>{{ x.name }}</td> 
     <td>{{ x.ic}}</td> 
     <td>{{ x.gender }}</td> 
     </tr> 
    </table>  
    </div> 
</ion-content> 
</ion-view> 

Вот мои услуги:

app.service("customerSearchService",function() 
{ 
    this.searchByName = function(name){ 

      var invokeData = { 
       adapter:"customerAdapter", 
       procedure:["searchCustomerByNM"], 
       parameters:[name] 
      }; 

      var options = { 
       onSuccess:loadSQLQuerySuccess, 
       onFailure:loadSQLQueryFailure, 
       invocationContext:{'action':'Search Customer'} 
      }; 

      WL.Client.invokeProcedure(invokeData,options); 
      function loadSQLQuerySuccess(result){ 
       var customers = new Array(); 
       var SJ = JSON.parse(JSON.stringify(result)); 
       var length = SJ.invocationResult.resultSet.length; 
       for(var i=0;i<length;i++) 
       { 
        customers[i] = {name:SJ.invocationResult.resultSet[i].CUST_NM , ic:SJ.invocationResult.resultSet[i].CUST_NIRC , gender:SJ.invocationResult.resultSet[i].CUST_GENDER}; 
       } 
       return customers;  
      } 
      function loadSQLQueryFailure(){ 
       console.log("failureSend"); 
       alert("failureSend"); 
       var customers = new Array(); 
       return customers; 
      } 
    } 
}); 

Это мой контроллер:

app.controller('CustomerCtrl', function($scope, customerSearchService,busyIndicator) { 
$scope.getCustomers = function(customerName) 
{ 
    $scope.customers = []; 
    busyIndicator.show(); 
    $scope.customers = customerSearchService.searchByName(customerName); 
    alert($scope.customers); 
    busyIndicator.hide(); 
}; 
$scope.customerSearch=function(customerName){ 
    $scope.getCustomers(customerName); 
} 

}) 

Как я должен написать обслуживание и контроллер? (укажите код в моем случае) Я пробовал раньше, но моя функция возвращает пустой результат, потому что результат возвращается, прежде чем адаптер извлечет все данные. Как дождаться адаптера получить все данные?

Заранее спасибо.

Answer 1

Основная проблема заключается в том, что ваш searchByName ничего не возвращает. Посмотрите внимательно, вы увидите, что только операторы return находятся в пределах других функций. Таким образом, ваш вызов функции закончится, не возвращая ничего. И, как вы сказали, он вернется еще до завершения заклинания.

Что вы испытываете, это типичный поток услуг asynchronous.

Я знаю 2 подходов к этой проблеме:

• посылов: Обещаний позволяют «ждать» для ответа на пути, как вы просили.

Читайте о Promises в целом: http://www.html5rocks.com/en/tutorials/es6/promises/

Читайте о Promises в AngularJS: https://docs.angularjs.org/api/ng/service/ $ д

Читайте о Promises в службах: http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

• AngularJS транслируемых Broadcast позволяет отправьте сообщение с одного места (ваш сервис) и получите его в другом месте (ваш контроллер).Таким образом, вы можете свистеть свой контроллер, когда вы закончили: $on and $broadcast in angular

Answer 2

Вы можете попробовать использовать $ Q (https://docs.angularjs.org/api/ng/service/ $ д) в службе

app.service("customerSearchService",function($q) // Add $q 
{ 
    this.searchByName = function(name){ 
     var deferred = $q.defer(); 
     var invokeData = { 
      adapter:"customerAdapter", 
      procedure:"searchCustomerByNM", // Note this is not an array 
      parameters:[name] 
     }; 

     var options = { 
      onSuccess:loadSQLQuerySuccess, 
      onFailure:loadSQLQueryFailure, 
      invocationContext:{'action':'Search Customer'} 
     }; 

     WL.Client.invokeProcedure(invokeData,options); 
     function loadSQLQuerySuccess(result){ 
      var customers = new Array(); 
      var SJ = JSON.parse(JSON.stringify(result)); 
      var length = SJ.invocationResult.resultSet.length; 
      for(var i=0;i<length;i++) 
      { 
       customers[i] = {name:SJ.invocationResult.resultSet[i].CUST_NM , ic:SJ.invocationResult.resultSet[i].CUST_NIRC , gender:SJ.invocationResult.resultSet[i].CUST_GENDER}; 
      } 
      //return customers;  
      deferred.resolve(customers); 
     } 
     function loadSQLQueryFailure(){ 
      console.log("failureSend"); 
      alert("failureSend"); 
      var customers = new Array(); 
      //return customers; 
      deferred.reject(customers); 
     } 

     return deferred.promise; 
    } 
}); 

Answer 3

Могу я также рекомендую вам прочитать и следовать блог Раймонда Камден , Он сделал несколько сообщений на MFP и Ionic, включая использование адаптера.

http://www.raymondcamden.com/