ANGULAR 1.5 controllers in different .js documents

Question

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

Ive tried to put the module and configuration in a file like this: 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

(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

(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?

emed · Accepted Answer · 2016-08-12T22:35:11.850

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.

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

ANGULAR 1.5 controllers in different .js documents

1 Answers1