javascript - Pass jQuery dependency to angular js controller

Question

I am using angularjs 1.4, and in one of my angular controller I have to use jQuery. but when I am trying to pass it as dependency, it is not working.

I tried below code, but no success

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['jQuery',
        function($) {
         // some logic
    }]);
})();

I also tried below code, but no success

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['$',
        function($) {
         // some logic
    }]);
})();

Can some please guide what I am doing wrong.

Answer 1

You could create your own constant inside your app module & then you can inject that dependency where ever you want.

app.constant('jQuery', window.jQuery)

I chosen constant, because It would be available to inject its dependency inside config phase of angular.

(function () {
    'use strict';

    var app= angular.module('app');

    app.controller('getUserInfo', ['jQuery',
        function($) {
         // $ will provide you all jQuery method available in it.
         //but don't do DOM manipulation from controller.
         //controller is not the correct place to play with DOM.
    }]);
})();

But as you wanted to inject dependency of jQuery inside a controller, I'd say NO. Don't do that. Basically you shouldn't do any DOM manipulation from the controller. You can do that from the directive, which has capability to playing in better way with DOM.