IBM MobileFirst Adapter 如何与 Angular JS 集成？

Posted 2023-02-26

【中文标题】IBM MobileFirst Adapter 如何与 Angular JS 集成？

【英文标题】：How IBM MobileFirst Adapter integrate with Angular JS?

【发布时间】：2015-08-19 07:26:04

【问题描述】：

我正在使用 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);


)

我应该如何编写服务和控制器？ （请在我的情况下提供代码） 我之前尝试过，但是我的函数一直返回空结果，因为结果是在适配器获取所有数据之前返回的。如何等待适配器获取所有数据？

提前致谢。

【问题讨论】：

不，您需要提供当前的实现，以便对其进行检查。添加它。

@IdanAdar，对于 IBM MobileFirst，您认为 Ionic 是否比 JQueryMobile 更好？在我使用 JQueryMobile 之前，在遇到 IBM 的一些员工后，他们建议我使用 Ionic。

Ionic 很受欢迎。

【参考方案1】：

主要问题是您的searchByName 没有返回任何内容。 仔细观察，您会发现唯一的 return 语句在其他函数中。因此，您的函数调用将结束而不返回任何内容。就像你说的，它甚至会在调用完成之前返回。

您所体验的是典型的asynchronous 服务流程。

我知道解决这个问题的两种方法：

承诺： Promise 允许你以某种方式“等待”答案，就像你问的那样。

阅读有关 Promises 的一般信息：http://www.html5rocks.com/en/tutorials/es6/promises/

阅读 AngularJS 中的 Promise：https://docs.angularjs.org/api/ng/service/$q

阅读服务中的承诺：http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

AngularJS 广播 广播允许您从一个地方（您的服务）发送消息并在另一个地方（您的控制器）接收它。因此，您可以在完成后 ping 您的控制器：$on and $broadcast in angular

【参考方案2】：

您可以尝试在您的服务中使用 $q (https://docs.angularjs.org/api/ng/service/$q)

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

【参考方案3】：

我还建议您阅读并关注 Raymond Camden 的博客。他发表了几篇关于 MFP 和 Ionic 的文章，包括适配器的使用。

http://www.raymondcamden.com/

【讨论】：

感谢推荐，很有帮助~