Начало работы с $ 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'];