각도 1.5 다른 .js 문서에있는 컨트롤러

Question

2 개의 모듈 1 개 (현재)와 하나의 서비스가있는 애플리케이션이 있습니다. 다음 user.js

(function() { 
    'use strict'; 

    var app = angular.module('Users', ['ngRoute']); 

    app.config(['$routeProvider', '$locationProvider', config]); 
    app.controller('usersController', [usersController, UsersService]); 
    app.service('UsersService', ['$http', UsersService]); 

    function config($routeProvider, $locationProvider) { 
     $routeProvider 
      .when('/users', { 
      templateUrl: 'users/views/users-list.html', 
      controller: usersController 
      }) 
      .otherwise({redirectTo: '/'}); 
    } 


})(); 

정당이 같은 컨트롤러 : userController.js

(function() { 
    'use strict'; 

    var app = angular.module('Users'); 
    app.controller('usersController', usersController); 

    /* @ngInject */ 
    function usersController(UsersService) { 

     /*jshint validthis: true */ 
     var vm = this; 

     vm.names = [ 
      'Welder', 
      'Jéssica' 
     ]; 

     vm.findList = UsersService.findList() 
      .then(function(data) { 
       console.dir(data.data[0]); 
       vm.users = data.data; 
       console.log('vm: ', vm.users[0].name); 
      }); 
    } 
})(); 

그리고 마지막으로 내 서비스 : usersService

을

필자는이 같은 파일에 모듈 및 구성을 넣어 시도

(function() { 
    'use strict'; 

    var app = angular.module('Users'); 
    app.controller('usersService', usersService); 

    function UsersService($http) { 
     var BASE_URL = 'http://localhost:3000/api/users'; 

     this.create = create; 
     this.findList = findList; 
     this.find = find; 
     this.edit = edit; 
     this.remove = remove; 

     function create(user) { 
      var request = { 
       url: BASE_URL, 
       method: 'POST', 
       data: user 
      }; 
     return $http(request); 
     } 

     function findList() { 
      var request = { 
       url: BASE_URL, 
       method: 'GET' 
      }; 
      return $http(request); 
     } 

     function find(id) { 
      var request = { 
       url: BASE_URL + id, 
       method: 'GET', 
      }; 
      return $http(request); 
     } 

     function edit(user,id) { 
      var request = { 
       url: BASE_URL + id, 
       method: 'PUT', 
       data: user 
      }; 
      return $http(request); 
     } 

     function remove(id){ 
      var request = { 
       url: BASE_URL + id, 
       method: 'DELETE' 
      }; 
      return $http(request); 
     } 
    } 

})(); 

왜 누군가가 그것을 설명 할 수 있습니까? r은 둘 다 내 index.html에 선언하더라도 분리 된 컨트롤러 또는 서비스를 정의합니까?

Answer 1

컨트롤러와 서비스 선언 및 함수 이름이 일치하지 않습니다 (javascript는 대소 문자를 구분 함). 서비스를 컨트롤러로 선언하고 종속성이 누락되었습니다.

app.controller('usersService', usersService); 
    ^      ^
function UsersService($http) { 
     ^

는 같아야

app.controller('usersController', ['usersService', usersController]); 

/* @ngInject */ 
function usersController(UsersService) { 

또한

app.service('usersService', ['$http', UsersService]); 

function UsersService($http) { 

는 컨트롤러와 users.js

에서 서비스를 선언 해달라고