angular.js - angularjs 讀取不出json文件

Question

參考Phonecat做的食譜網站，在做路由的時候出了點問題，json資料不能顯示在模板上。

//设置路由
angular.
    module('recipeApp').
    config(['$locationProvider', '$routeProvider', 
        function config($locationProvider, $routeProvider) {
            $locationProvider.hashPrefix('!');

            $routeProvider.
                when('/data', {
                    template: '<recipe-list></recipe-list>'
                }).
                when('/data/:recipeId', {
                    template: '<recipe-detail></recipe-detail>'
                }).
                otherwise('/data');
        }
    ]);

這個呼叫recipe-list是沒問題的

//这个是模仿原版做的对HTTP封装
angular.
    module('recipequery').
    factory('Recipe', ['$resource', 
        function($resource) {
            return $resource('data/:recipeId.json', {}, {
                query: {
                    method: 'GET',
                    params: {recipeId: 'recipes'},
                    isArray: true
                }
            });
        }
    ]);

在recipe-list裡呼叫的.query沒有出問題

//这是注册recipedetail组件
angular.
    module('recipeDetail').
    component('recipeDetail',{
        templateUrl: 'recipe-detail/recipe-detail-template.html',
        controller: ['$routeParams', 'Recipe',
            function RecipeDetailController($routeParams, Recipe) {
                this.recipe = Recipe.get({recipeId: $routeParams.recipeId});
        }
      ]
    });

這裡我和原版有些不一樣，放棄了他的切換圖片功能，這裡我就瞎改了下，結果就是模板dom裡的字都能看到，需要調取的json數據全沒有，附上我的範本：

//recipe-detail-template.html
<p class="detail-container container-fluid">
    <p class="banner">
        <i><img ng-src="{{$ctrl.recipe.imageUrl}}"/></i>
        <p class="comment">
            <h2>{{$ctrl.recipe.name}}</h2>
            <span>"</span><p>{{$ctrl.recipe.comment}}</p><span>"</span>
        </p>
    </p>
    <p class="ingredient">
        <h3>Ingredients</h3>
        <ul>
            <li ng-repeat="(x,y) in $ctrl.recipe.ingredients">
                {{x}}<span>{{y}}</span>
            </li>
        </ul>
    </p>
    <p class="step">
        <h3>Steps</h3>
        <ol ng-repeat="step in $ctrl.recipe.step">
            {{step}}
        </ol>
    </p>
</p>

Answer 1

自問自答小王子. 是json格式出錯，突然對這個自己提的問題感到很羞恥