서비스를 사용해보기

MVC의 V(html), C(Controller)에 이어 M의 역할을 담당하는 Service를 사용해 보겠습니다.
Model 관련 처리를 Service 내에 캡슐화함으로써 백엔드를 MySQL이지만 Oracle이지만 Google Cloud Endpoints일지라도 다른 레이어에 영향을 주지 않고 자유자재로 전환할 수 있습니다.
실제로는 백엔드를 바꾸는 것은 거의 없기 때문에(그렇지요?) 그래서, 여기서는 실천적인 예로서, 우선 모형용의 데이터를 취급하는 서비스를 만들어 보겠습니다.

js/service/osservice.js 만들기


내용

osservice.js

app.factory('OSService', function () {
    var service = {};

    var oss= [
        {"name":"KiKat", "kind":"android", "desc":"androidos4.4系です"},
        {"name":"JellyBean", "kind":"android", "desc":"androidos4.1-3系です"},
        {"name":"Honycomb", "kind":"android","desc":"androidos3.x系です"},
        {"name":"Mavericks", "kind":"osx","desc":"Mac 10.9"},
        {"name":"Mountain Lion", "kind":"osx", "desc":"Mac 10.8"},
        {"name":"Lion", "kind":"osx","desc":"Mac 10.7"},
        {"name":"SnowLeopard", "kind":"osx", "desc":"Mac 10.6"},
    ];

    /**
     * OSのリストを取得する
     * この関数内で遅延が発生しても良いようにcallbackで返す
     */
    service.getOSList= function(callback) {
            callback(oss);
    }

    // serviceオブジェクトを返す
    return service;
});

js/controller/page1controller.js 수정

page1controller.js

app.controller('Page1Ctrl',function($scope, OSService){ // OSServiceをインジェクト

    /**
     * 検索結果を受け取るコールバック関数
     */
    var searchCallback = function(data){
        $scope.oss = data;
    };

    OSService.getOSList(searchCallback);

}) ;

index.html에 osservice.js 로딩 추가

index.html

       .
       .
    <link rel="stylesheet" href="css/style.css">
    <script src="js/controller/page1controller.js"></script>
    <script src="js/service/osservice.js"></script> <!-- 追加 -->
    <script>
        var app = ons.bootstrap();
       .
       .

어때? 미리보기하면 전혀 변하지 않는 결과가 표시됩니다.

포인트는, Controller측에서 OSService 를 사용하기 위해서 인젝트 하고 있는 개소와, 검색의 지연을 고려해 검색 결과를 콜백 함수 경유로 Controller에 돌려주고 있는 곳입니다. javascript 같네요.

정말 지연에 대응하고 있습니까? 이렇게하면 지연되도록 코드를 수정합니다.

osservice.js

       .
       .
   service.getOSList= function(callback) {
            setTimeout(function(){callback(oss)},3000); //3秒待って結果を返す
    }
       .
       .

어때? 미리 보기에 표시되었습니까? 그렇지 않습니다.
AngularJS에게 $scope.oss가 업데이트되었음을 ​​알려야합니다.

그래서 page1controller.js 수정

page1controller.js

       .
       .
    var searchCallback = function(data){
        $scope.oss = data;
        $scope.$apply();  // VIEWを更新する
    };
       .
       .

이제 3초 후에 OS 목록이 표시됩니다.

또한 page1.html 를 수정하여 로드 대기를 표시해 봅니다.

page1.html

<ons-page>
<div ng-controller="Page1Ctrl">
  <ons-toolbar>
    <div class="center">List With Header</div>
  </ons-toolbar>

<div ng-if="!!oss">
  <!-- ossが無い場合は表示しない-->
  <ons-list>
    <ons-list-header>Android Versions</ons-list-header>
    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'android'">
    {{os.name}}
    </ons-list-item>

    <ons-list-header>MacOSX Versions</ons-list-header>
    <ons-list-item modifier="chevron" ng-repeat="os in oss" ng-if="os.kind == 'osx'">
    {{os.name}}
    </ons-list-item>
  </ons-list>
</div>
<div ng-if="!oss" style="text-align:center;">
  <!-- ossが無い場合に読み込み待ちを表示 -->
      <br>
      <br>
      <ons-icon icon="spinner" spin="true"></ons-icon>
</div>
</div>
</ons-page>

angularjs의 기능인 ng-if를 사용하여 oss가 없는 경우의 표시를 제어하고 있습니다.
이것으로 다시 한 걸음 앱처럼 되어 왔습니다!