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格式出错，突然对这个自己提的问题感到很羞耻