title: How to use jQuery plugins in AngularJS?
body: <p>I am using AngularJS 1.2 and trying to include a jQuery plugin via an Angular Directive. As an example I have chosen a plugin called <a href="http://bgrins.github.io/spectrum/" rel="nofollow">spectrum</a>. I have not included (and do not wish to include) jQuery separately, as AngularJS is said to include jqLite, a smaller version of jQuery.</p>
  
  <pre><code>myDirs.directive('spectrumDir', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              angular.element(element).spectrum(scope.$eval(attrs.spectrumDir));
          }
      };
  });
  </code></pre>
  
  <p>However, when i try to load the app, I get:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: jQuery is not defined spectrum.js:1888
    (anonymous function)</p>
  </blockquote>
  
  <p>The error stems from the initialization of the plugin:</p>
  
  <pre><code>(function (window, $, undefined) {
      …code…
  })(window, jQuery);
  </code></pre>
  
  <p>What is the generic solution to including jQuery plugins in AngularJS? Is there any elegant way to achieve this without including the full jQuery library?</p>
  
  <blockquote>
    <p>AngularJS comes bundled with a lite implementation of jQuery referred
    to as jqLite. For Angular’s purposes, this is effectively jQuery,
    albeit an extremely gutted one. The creators of Angular believe the
    jqLite API to be sufficient for nearly every application if utilized
    properly.</p>
  </blockquote>