Creating a plugin system in Angular JS with the $compile service

Angular JS directives are powerful. Using them allows you to manipulate pretty much everything in the DOM that you would want to. But there is one exception. Dynamically creating a directive depending on data received from the server, something often used for plugin systems. Luckily we can access the $compileProvider…

Javascript Schönfinkeling

In Javascript is it extremely common to pass function as parameters to other functions. function addOne(a) { return a + 1; } [1,2,3,4].map(addOne); This is all good. However when your function takes more than one parameter, you can't just pass the function directly so you need to…

Studying the Angular injector - loading Modules

(This post is part of a series studying the AngularJS injector) A module gets loaded with the following code: function loadModules(modulesToLoad){ var runBlocks = [], moduleFn, invokeQueue, i, ii; forEach(modulesToLoad, function(module) { if (loadedModules.get(module)) return; loadedModules.put(module, true); try { if (isString(module)) { moduleFn = angularModule(module); runBlocks = runBlocks…

Studying the Angular injector - the twin injectors

(This post is part of a series studying the AngularJS injector) When Angular creates the injector, it actually creates two injectors: providerInjector = (providerCache.$injector = createInternalInjector(providerCache, function() { throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- ')); })), instanceInjector = (instanceCache.$injector = createInternalInjector(instanceCache, function(servicename) { var provider = providerInjector.get…

Studying the Angular JS injector - instantiate

(This post is part of a series studying the AngularJS injector) Whilst invoke calls a function with it's parameters injected, instantiate will contruct a new object with it's constructor parameters injected. instantiate gives us an excellent insight into how javascript objects work. In javascript, a class is just a function…

Studying the Angular injector - invoke

(This post is part of a series studying the AngularJS injector) The invoke method invokes the given function with the parameters injected. function invoke(fn, self, locals){ var args = [], $inject = annotate(fn), length, i, key; for(i = 0, length = $inject.length; i < length; i++) { key = $inject[i]; if (typeof…