Angular Widget

AngularJS widget framework

Demo: http://shahata.github.io/angular-widget/

What it does

One of the main problems people discover in angular when they try to write a very big application with all sorts of components, is that you can't load code during run-time easily. When angular bootstraps your DOM, it creates an injector with the configuration that was defined at that moment and you cannot add services, directives, controllers, etc. easily after the injector was created. This library allows you to download js/css/html code into a running angular app and will create a new injector for that "widget". Since each widget has its own injector, each widget has a different instance for services that they use. They can configure them how ever they like without any effect on any other widget or on the main application that hosts the widgets. Regardless, all widgets share the same DOM, so a widget create modal dialogs or whatever it likes. Widgets are simply added to the DOM using the ng-widget directive. The directive download all required files and creates the widget. Widgets can get information from the hosting application using the options attribute of the directive and they can report to the hosting application using widgetConfig.exportProperties and widgetConfig.reportError.

Installation

Install using bower

bower install --save angular-widget

Include script tag in your html document.

<script type="text/javascript" src="bower_components/angular-widget/angular-widget.js"></script>

Add a dependency to your application module.

angular.module('myApp', ['angularWidget']);

Directive Usage

<ng-widget src="'demo'" options="{name: 'value'}"></ng-widget>