コントローラがコントローラにロードされていません

Question

私は書いています（チュートリアルの一部として）かなり簡単なファクトリだと思っていますが、コントローラにロードすることができません。私が次のチュートリアルでは$ scopeを使っていますが、私はすべてを 'コントローラとして'書き直しています。ここで

は私のファクトリ関数です：

(function(){ 
    var customersFactory = function(){ 
     console.log('running'); 
     var customers=[ 
      { 
       id: 1, 
       joined: '2000-12-02', 
       name:'John', 
       city:'Chandler', 
       orderTotal: 9.9956, 
       orders: [ 
        { 
         id: 1, 
         product: 'Shoes', 
         total: 9.9956 
        } 
       ] 
      }, 
      { 
       id: 2, 
       joined: '1965-01-25', 
       name:'Zed', 
       city:'Las Vegas', 
       orderTotal: 19.99, 
       orders: [ 
        { 
         id: 2, 
         product: 'Baseball', 
         total: 9.995 
        }, 
        { 
         id: 3, 
         product: 'Bat', 
         total: 9.995 
        } 
       ] 
      }, 
      { 
       id: 3, 
       joined: '1944-06-15', 
       name:'Tina', 
       city:'New York', 
       orderTotal:44.99, 
       orders: [ 
        { 
         id: 4, 
         product: 'Headphones', 
         total: 44.99 
        } 
       ] 
      }, 
      { 
       id: 4, 
       joined: '1995-03-28', 
       name:'Dave', 
       city:'Seattle', 
       orderTotal:101.50, 
       orders: [ 
        { 
         id: 5, 
         product: 'Kindle', 
         total: 101.50 
        } 
       ] 
      } 
     ]; 
     var factory = {}; 
     console.log(customers); 
     factory.getCustomers = function(){ 
      return customers 
     }; 
     return factory; 
    }; 

    angular.module('customersApp') 
     .factory('customersFactory', customersFactory); 
}()); 

、ここでは私の最初のコントローラです：

(function(){ 
    var CustomersController = function(customersFactory) { 
     var vm = this; 
     vm.sortBy = 'name'; 
     vm.reverse = false; 
     vm.customers = []; //placeholder 

     init = function(){ 
      vm.customers=customersFactory.getCustomers(); 
     }; 

     init(); 

     vm.doSort = function(propName) { 
      vm.sortBy = propName; 
      vm.reverse = !vm.reverse; 
     }; 
    }; 

    CustomersController.$inject = ['$routeParams', 'customersFactory']; 

    angular.module('customersApp') 
    .controller('CustomersController', CustomersController); 
}()); 

このコントローラは、お客様のテーブルを作るためにNGリピートを使用するビューに取り付けられています。データ。これは、工場のリファクタリング前に正常に機能しました。

起動時にファクトリ機能が実行されていますが、コントローラで認識されないようです。エラーが表示されます：

angular.js:13920 TypeError: customersFactory.getCustomers is not a function at init (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:12:43) at new CustomersController (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:15:9) at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:4733:14) at $controller (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:10369:28) at Object.link (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/scripts/angular-route.js:1001:26) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:1247:18 at invokeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9934:9) at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9335:11) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8620:13) at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8500:30) (anonymous function) @ angular.js:13920(anonymous function) @ angular.js:10467invokeLinkFn @ angular.js:9936nodeLinkFn @ angular.js:9335compositeLinkFn @ angular.js:8620publicLinkFn @ angular.js:8500lazyCompilation @ angular.js:8844boundTranscludeFn @ angular.js:8637controllersBoundTransclude @ angular.js:9385update @ angular-route.js:959$broadcast @ angular.js:18005(anonymous function) @ angular-route.js:643processQueue @ angular.js:16383(anonymous function) @ angular.js:16399$eval @ angular.js:17682$digest @ angular.js:17495$apply @ angular.js:17790done @ angular.js:11831completeRequest @ angular.js:12033requestLoaded @ angular.js:11966 http://127.0.0.1:65178/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

私は間違っていますか？

Answer 1

あなたは、2つのサービス

CustomersController.$inject = ['$routeParams', 'customersFactory']; 

を注入している。しかし一つだけの引数があります。

var CustomersController = function(customersFactory) { 

だけコントローラに$ routeParamsを追加します。

var CustomersController = function($routeParams, customersFactory) { 

は、なぜあなたはanonymouse機能を使用していますか？

angular.module('customersApp').controller('CustomersController', CustomersController); 

CustomersController.$inject = ['$routeParams', 'customersFactory']; 
function CustomersController($routeParams, customersFactory) { 
} 

これは多くのクリーナーです。