angulaire.js - angulairejs ne peut pas lire les fichiers json

Question

En référence au site de recettes réalisé par Phonecat, il y a eu quelques problèmes lors du routage. Les données json n'ont pas pu être affichées sur le modèle.

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

Il n'y a aucun problème pour appeler la liste de recettes

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

Il n'y a aucun problème avec le .query appelé dans la liste de recettes

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

Ici, je suis un peu différent de la version originale. J'ai abandonné la fonction de changement d'image, j'ai donc fait quelques modifications aveugles ici, le résultat est que tous les mots du modèle dom peuvent être vus, et il n'y en a pas. données json qui doivent être récupérées. Ci-joint Mon modèle :

//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 et réponse pour toi, petit prince. C'est le format json qui ne va pas, et j'ai soudain honte de poser cette question