Merujuk kepada laman web resipi yang dibuat oleh Phonecat, terdapat beberapa masalah semasa melakukan penghalaan Data json tidak dapat dipaparkan pada templat.

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

Tiada masalah untuk memanggil senarai resipi

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

Tiada masalah dengan .query yang dipanggil dalam senarai resipi

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

Di sini saya berbeza sedikit daripada versi asal saya melepaskan fungsi menukar gambar, jadi saya membuat beberapa perubahan buta di sini data json yang perlu diambil. Dilampirkan Templat saya:

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