angular.js - angularjs cannot read json files

Question

Referring to the recipe website made by Phonecat, there were some problems when doing the routing. The json data could not be displayed on the template.

//设置路由
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');
        }
    ]);

There is no problem in calling recipe-list

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

There is no problem with the .query called in recipe-list

//这是注册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});
        }
      ]
    });

Here I am a little different from the original version. I gave up the function of switching pictures, so I made some blind changes here. The result is that all the words in the template dom can be seen, and there is no json data that needs to be retrieved. Attached My template:

//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

Question and answer for yourself, little prince. It’s the json format that is wrong, and I suddenly feel ashamed of asking this question