$inject 入门

Question

我正在尝试关注John Papa's Angular styleguide 来编写一个有角度的应用程序，但是依赖注入对我来说不起作用。 ShopController 和 dataservice 都有依赖关系，但无论我尝试什么，我总是遇到"cannot read property ____ of undefined"。

angular
    .module('shopApp', []);

////////////////////////////////////////////////////////

angular
    .module('shopApp')
    .controller('ShopController', ShopController);

ShopController.$inject['dataservice'];

function ShopController(dataservice){
    var vm = this;
    vm.products = [];
    vm.getProducts = getProducts;
    vm.title = 'test title';

    activate();

    function activate() {
        return getProducts().then(function() {
            console.info('Got Products');
        });
    }

    function getProducts() {
        return dataservice.getProducts().then(function(data) {
            vm.products = data;
            console.info(data);
            return vm.products;
        });
    }
}

////////////////////////////////////////////////////////


angular
    .module('shopApp')
    .factory('dataservice', dataservice);

dataservice.$inject = ['$http'];

function dataservice($http) {
    return {
        getProducts: getProducts
    };

    function getProducts() {
        return $http.get('/api/products')
            .then(getProductsComplete)
            .catch(getProductsFailed);

        function getProductsComplete(response) {
            return response.data.results;
        }

        function getProductsFailed(error) {
            console.error('XHR Failed for getProducts.' + error.data);
        }
    }
}

这种方法确实看起来更干净，但我很困惑为什么它不能正常工作。有什么建议吗？

Answer 1

替换这个：

ShopController.$inject['dataservice'];

通过

ShopController.$inject = ['dataservice'];