How to inject jQuery into an Angular 1.5 component

Question

I was wondering how to inject jquery into a component. For example

In my webpack.conf file:

 new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
 })

In my component file:

module.exports = {
 templateUrl: 'app/example.html',
 controller: ['$', exampleController]
};

function exampleController(){
 console.log('exampleController');
};

Stack: Angular 1.5, JavaScript, NPM and Webpack

Answer 1

Unless you have jQuery wrapped as an angular module, you do not inject it into a controller using Angular injection. In order to use jQuery inside an angular component with webpack, simply require it at the top of whatever file you are using it:

var $ = require('jquery');