How to use jQuery plugins in AngularJS?-Collection of common programming errors

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 spectrum. I have not included (and do not wish to include) jQuery separately, as AngularJS is said to include jqLite, a smaller version of jQuery.

myDirs.directive('spectrumDir', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            angular.element(element).spectrum(scope.$eval(attrs.spectrumDir));
        }
    };
});

However, when i try to load the app, I get:

Uncaught ReferenceError: jQuery is not defined spectrum.js:1888 (anonymous function)

The error stems from the initialization of the plugin:

(function (window, $, undefined) {
    .code.
})(window, jQuery);

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?

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.

1. As “Arun P Johny” said, you must FIRST include the jquery javascript and then your plugin which depends on jQuery

Originally posted 2013-12-02 01:20:27.