Angular UIRouter解析未知提供程序

Question

我正在尝试使用ui-router resolve来获取一些数据以便在控制器中使用:

$stateProvider
    .state('home', {
    url: '/', 
    templateUrl: 'templates/home.html',
    controller: 'homeCtrl',
    resolve: {                          
       friends: ['$http', function($http) {
            return $http.get('api/friends.json').then(function(response) {
                    return response.data;
            })
        }]
    }
})

这是控制器:

angular.module('app').controller('homeCtrl', ['friends', function(friends) {
        this.friends = friends;
    }]);

HTML:

<section ng-controller="homeCtrl as home">
    <ul>
        <li ng-repeat="friend in home.friends">
            {{friend.name}} : {{friend.age}}
        </li>
    </ul>
</section>

我怎样才能让它发挥作用？我得到的错误告诉我定义服务.不太清楚该怎么做.此外,我知道我可以通过注入$ scope来实现它.我希望避免这种情况,因为我正在努力学习新的东西.

Answer 1

您已将控制器包括两次.一旦进入HTML,一次进入ui-router.因此,您实际上获得了两个控制器实例.

解决方案:从HTML中删除控制器包含,并将其添加到ui-router $ stateProvider:

controllerAs: 'home'