不同 .js 文档中的 ANGULAR 1.5 控制器答案

【问题标题】：ANGULAR 1.5 controllers in different .js documents不同 .js 文档中的 ANGULAR 1.5 控制器
【发布时间】：2016-12-20 00:09:22
【问题描述】：

我有一个包含 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);
        }
    }

})();

有人可以解释为什么即使我在 index.html 中声明了两者，它也从未定义分离的控制器或服务吗？

【问题讨论】：

标签： javascript angularjs controllers modular

【解决方案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 中声明控制器和服务

【讨论】：