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

I have an application with 2 modules 1 controller (for now) and one service.

我有一个应用程序有2个模块1控制器(现在)和一个服务。

Ive tried to put the module and configuration in a file like this: user.js

我试图将模块和配置放在这样的文件中: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: '/'});
    }


})();

then a controller just like this: userController.js

然后像这样的控制器: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);
            });
    }
})();

and finally my service: usersService

最后我的服务: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);
        }
    }

})();

Can someone explain why it never defines the separated controller or service even if I declare both of then in my index.html?

有人可以解释为什么它永远不会定义分离的控制器或服务,即使我在我的index.html中声明了两个?

1 个解决方案

#1

Your controller and service declarations and the function names don't match (javascript is case sensitive), declaring service as controller and you are missing the dependencies.

您的控制器和服务声明与函数名称不匹配(javascript区分大小写),将服务声明为控制器并且您缺少依赖项。

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

should be:

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

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

and

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

function UsersService($http) {

Also, dont declare the controller and the service in users.js

另外,不要在users.js中声明控制器和服务

#1