javascript - What are the best practices for using angular DI with libraries like Modernizr, lodash, and jquery plugins? -

javascript - What are the best practices for using angular DI with libraries like Modernizr, lodash, and jquery plugins? -

i've noticed not mutual wrap 3rd party scripts in angular js provider dependency injection , not sure why. new angular , trying figure out best way leverage di jquery plugins, lodash, modernizr, etc...

consider illustration found:

var app = angular.module('toolbar', []); app.directive('toolbartip', function() { homecoming { restrict: 'a', link: function(scope, element, attrs) { $(element).toolbar(scope.$eval(attrs.toolbartip)); } }; });

http://jsfiddle.net/codef0rmer/th87t/

this seems work totally fine, improve create value, constant or other provider toolbar tip jquery plugin inject directive? also, should directive require jquery (not jqlite), should wrapped in provider , injected well?

similarly modernizr , lodash, considered best way appraoch di libraries?

with modernizr:

angular.module('someapp', []) .provider('modernizr', function () { this.$get = function () { homecoming modernizr || {}; }; }) .factory('cgevents', function(modernizr) { homecoming { buttonpressedevent : function() { if ( modernizr.touch ) { homecoming 'touchstart'; } else { homecoming 'click'; } } }; })

with lodash:

angular.module('someapp', []) .factory('_', function() { homecoming window._; // assumes lodash has been loaded on page }); .directive('cgfillviewport', function (_) { homecoming { restrict: 'a', link: function(scope, $elm) { var resizer = function() { //code fired on resize... }; $(window).resize( _.throttle( resizer, 100 )); } }; })

is valid way of using dependency injection? insight on appreciated!

i think you're on right path. far i've been doing same , worked ok(but application gets bigger refactor code utilize requirejs. maintain in mind, though, jquery can cause memory leaks in angular. since angularjs apps single-page apps , jquery objects outside angular scope, don't destroyed though route gets changed! careful delete jquery references in directives when $destroy event fired.

more details on issue here.

javascript angularjs dependency-injection