Dependency Injection - what went wrong

Question

I've just started out on an app using AngularJS

When I was defining my controller, I've noticed something odd and I can't seem to answer it myself.

My controller:

    (function () {
    "use strict";
    angular
            .module("app")
            .controller("LaunchController", LaunchController);
    LaunchController.$inject =["User"];
    function LaunchController() {
        var vm = this; //this = controllerobject -- vm(=ViewModel)
        vm.name = "launchtestname";
        vm.user= new User("a","b","c","d","e");
    }
    ;
})()

and my service that I'm calling:

(function () {
    "use strict";
    angular
            .module("app")
            .factory("User", User);
    function User() {
        /**
         * Constructor, with class name
         */
        var User =function (firstName, lastName, role, organisation) {
            // Public properties, assigned to the instance ('this')
            this.firstName = firstName;
            this.lastName = lastName;
            this.role = role;
            this.organisation = organisation;
        }

        /**
         * Public method, assigned to prototype
         */
        User.prototype.getFullName = function () {
            return this.firstName + ' ' + this.lastName;
        };

        /**
         * Private property
         */
        var possibleRoles = ['admin', 'editor', 'guest'];

        /**
         * Private function
         */
        function checkRole(role) {
            return possibleRoles.indexOf(role) !== -1;
        }

        /**
         * Static property
         * Using copy to prevent modifications to private property
         */
        User.possibleRoles = angular.copy(possibleRoles);

        /**
         * Static method, assigned to class
         * Instance ('this') is not available in static context
         */
        User.build = function (data) {
            if (!checkRole(data.role)) {
                return;
            }
            return new User(
                    data.first_name,
                    data.last_name,
                    data.role,
                    Organisation.build(data.organisation) // another model
                    );
        };

        /**
         * Return the constructor function
         */
        console.log(User);
        return User;
        };
})();

Now the issue that I'm having when I call the user constructor in my launch controller is that I get the error that User is not defined.

However if I inject my User service into the controller like so:

function LaunchController(User) {

Without the $inject - the issue doesn't happen.

I want to know what the difference is between both calls as I'd like to use gulp to minify my code and not lose the reference to User (there I use literals in $inject)

Answer 1

This is correct:

function LaunchController(User) {

You won't lose the reference on minifying, as you are explicitly injecting 'User' as a string using $inject. But you still need to have a parameter in your controller function declaration to receive the injected service.

See Angular tutorial on dependency injection particularly 'A Note on Minification' for an example.