角UIRouter解析未知的提供程序

Question

I'm trying to use ui-router resolve to grab some data for use in the controller:

$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;
            })
        }]
    }
})

Here is the controller:

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>

How can I get this to work? The error I'm getting tells me define the service. Not quite sure how to do that. Also, I know I can get it to work by injecting $scope. I am hoping to avoid that, as I am trying to learn something new here.

Answer 1

You have included the controller twice. Once in the HTML, and once in the ui-router. Therefore, you're actually getting two instances of the controller.

Solution: remove the controller include from the HTML, and add this to the ui-router $stateProvider:

controllerAs: 'home'