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>

我怎样才能让它工作？我得到的 error 告诉我定义服务。不知道如何做到这一点。另外，我知道我可以通过注入 $scope 来让它工作。我希望避免这种情况，因为我想在这里学习一些新东西。

Answer 1

您已经包含了两次控制器。一次在 HTML 中，一次在 ui-router 中。因此，您实际上得到了控制器的两个实例。

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

controllerAs: 'home'

Angular UIRouter 解析未知提供者

Angular UIRouter resolve unknown provider

javascript

angularjs

angular-ui-router