ui-routerプロジェクトでjson取得処理を入れてみました。

ベース

ローディング機能の付いたui-routerプロジェクト
[monaca]ui-router遷移時にローディング処理を入れてみた。

html

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="script.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="MyApp">

    <ons-page>
        <!-- ツールバー -->
        <ons-toolbar>
            <div class="center">JSON読み込み</div>
        </ons-toolbar>

        <!-- 画面のメイン部分 -->
        <div ng-controller="JSONController">
            <ons-button ng-click="readJSON();">JSON読み込み</ons-button>
        </div>

        <!-- 遷移読込部分 -->
        <div style="padding: 20px 10px;" ui-view></div>

        <!-- ローディング読込用ディレクティブ -->
        <my-loader></my-loader>

    </ons-page>

    <!-- リスト画面 -->
    <ons-template id="list.html">
        <h1>Flower List</h1>
        <div ng-controller="ListController">
            <h2 ng-repeat="(i, item) in list">
                {{i}} : {{item.name}}
            </h2>
        </div>
    </ons-template>

    <!-- ローディング画面 -->
    <ons-template id="loader.html">
        <div ng-if="$root.isLoading" class="loader-parent"><div class="loader">Loading...</div></div>
    </ons-template>
</body> 
</html>

json

flower.json

{
    "list": [
        {
            "name": "桜",
            "comment": "サクラ（桜）は、バラ科モモ亜科スモモ属 (Prunus, Cerasus) の落葉樹の総称。 <br>サクラは日本文化に馴染みの深い植物である(サクラ#日本人とサクラ)。 また、日本において観賞用として植えられているサクラの多くはソメイヨシノという品種である。"
        },
        {
            "name": "桃",
            "comment": "春には五弁または多重弁の花を咲かせ、夏には水分が多く甘い球形の果実を実らせる。<br>中国原産。食用・観賞用として世界各地で栽培されている。未成熟な果実や種子にはアミグダリンという青酸配糖体が含まれる。"
        },
        {
            "name": "梅",
            "comment" : "ウメ（梅、学名：Prunus mume、英: Japanese apricot[1]）は、バラ科サクラ属の落葉高木、またはその果実のこと。<br>花芽はモモと異なり、一節につき1個となるため、モモに比べ、開花時の華やかな印象は薄い。<br>毎年2月から4月に5枚の花弁のある1センチメートルから3センチメートルほどの花を葉に先立って咲かせる。<br>花の色は白、またはピンクから赤。葉は互生で先がとがった卵形で、周囲が鋸歯状。樹木と花は主に鑑賞用、実は食用とされる。"
        }
    ]
}

引用元) wikipedia

javascript

script.js

var myApp = angular.module('MyApp', ['onsen', 'ui.router']);

// 遷移処理
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('list', {
                url: '/list',
                templateUrl: 'list.html'
            })

    }]);

// メイン画面用コントローラ
myApp.controller('JSONController', ['$scope', '$state', '$rootScope', '$timeout', function($scope, $state, $rootScope, $timeout) {
        $scope.readJSON = function() {
            console.log("readJSON");

            // ローディングフラグON
            $rootScope.isLoading = true;

            // 2秒待ってから遷移する
            $timeout(function() {
                $state.go('list');
            }, 2000);
        }
    }]);

// リスト画面用コントローラ
myApp.controller('ListController', ['$scope', '$state', '$rootScope', 'JsonFlowerService', function($scope, $state, $rootScope, JsonFlowerService) {
        // Jsonデータ取得
        JsonFlowerService.run().then(
            function(resultList) {
                // 結果リストが取れたら、スコープに設定
                $scope.list = resultList;
            }, function(response) {
                // 取得に失敗したら、アラート
                ons.notification.alert({
                    title: 'JSON取得失敗',
                    message: response
                });
            }
        );
    }]);

// ローディングタグ
myApp.directive('myLoader', function() {
        return {
            restrict : 'E',
            replace: true,
            templateUrl: "loader.html"
        };
    }); 


// 画面遷移タイミング処理
myApp.run(['$rootScope', '$transitions', '$state', function($rootScope, $transitions, $state){
    $transitions.onSuccess({to:'*'}, function(trans){
        // ページ読み込み成功

        // ローディングフラグOFF
        $rootScope.isLoading = false;
    });

}]);


// JSON読込サービス
myApp.service('JsonFlowerService', ['$q', '$timeout', '$http', function($q, $timeout, $http){
     this.run = function () {
        console.log("JsonFlowerService");

        var deferred = $q.defer();

        $timeout(function(){
            $http({
                method: 'GET',
                url: 'flower.json'
            }).then(function successCallback(response) {                
                // 成功した場合、リストをまるごと返す
                deferred.resolve(response.data.list);
            }, function errorCallback(response) {
                // 失敗した場合、メッセージを返す
                var msg = "JsonFlowerService json取得失敗: "+ response.status;
                console.error(msg);
                deferred.reject(msg);
            });
        });

        return deferred.promise;
    };

}]);

画面イメージ

処理の流れ

※ローディング処理の流れは割愛

ボタン押下
$scope.readJSON が実行される
list.html が読み込まれる
1. ListController が読み込まれる
  1. JsonFlowerService.run().thenで、JsonFlowerService が実行される
    1. JSON結果取得に成功した場合、取得したJSONデータリストを返す
    2. JSON結果取得に失敗した場合、エラーメッセージを返す
  2. function(resultList)に遷移（処理成功）の場合、$scope.listに結果を設定
  3. function(response)に遷移（処理失敗）の場合、エラーメッセージをalert
2. h2タグのng-repeatで、JSONデータリストの内容を繰り返し表示する

[monaca]ui-routerでjson取得処理。

ベース

html

json

javascript

画面イメージ

処理の流れ

ソースコード