$ inject入门

我正在尝试遵循John Papa的Angular样式指南来编写角度应用程序，但是像这样的依赖注入对我来说是行不通的。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);
        }
    }
}

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