컨트롤러가 컨트롤러에로드되지 않음

Question

필자는 쓰기 쉽지만 (튜토리얼의 일환으로) 나는 컨트롤러를로드 할 수 없다. 내가 따르고있는 튜토리얼은 $ scope를 사용하고 있으며 나는 'controller as'로 모든 것을 고쳐 쓰고있다. 여기

내 공장 기능입니다 :

(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

당신은 두 가지 서비스

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) { 
} 

훨씬 더 깨끗합니다.