As I delve into the world of Angular, I've noticed that it's not very common to wrap third-party scripts in an AngularJS provider for dependency injection. I'm still trying to figure out the best approach to leverage DI with jQuery plugins, lodash, modernizr, and more.
Take a look at this example I stumbled upon:
var App = angular.module('Toolbar', []);
App.directive('toolbarTip', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).toolbar(scope.$eval(attrs.toolbarTip));
}
};
});
While this method seems to work perfectly fine, I wonder if creating a value, constant, or other provider for the toolbar tip jQuery plugin would be a better approach than injecting it directly into the directive. Similarly, should we consider wrapping jQuery (not jQlite) in a provider for injection?
When dealing with Modernizr:
angular.module('someApp', [])
.provider('Modernizr', function () {
this.$get = function () {
return Modernizr || {};
};
})
.factory('cgEvents', function(Modernizr) {
return {
buttonPressedEvent : function() {
if ( Modernizr.touch ) {
return 'touchstart';
} else {
return 'click';
}
}
};
})
And when using lodash:
angular.module('someApp', [])
.factory('_', function() {
return window._; // assuming lodash is already loaded on the page
});
.directive('cgFillViewPort', function (_) {
return {
restrict: 'A',
link: function(scope, $elm) {
var resizer = function() {
// code executed on resize...
};
$(window).resize(_.throttle(resizer, 100));
}
};
})
Is this a valid way of implementing dependency injection? I'd appreciate any insights or feedback on this matter!