参照Phonecat做的菜谱网站，在做路由的时候出了些问题，json数据不能显示在模板上。

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

            $routeProvider.
                when('/data', {
                    template: ''
                }).
                when('/data/:recipeId', {
                    template: ''
                }).
                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

    

        
        

            
{{$ctrl.recipe.name}}
            "
{{$ctrl.recipe.comment}}
"
        

    

    

        
Ingredients
        

            

                {{x}}{{y}}
            
        
    

    

        
Steps
        

            {{step}}