I have an application with a complex layout where the user could put (drag/drop) widgets (by choosing from a predefined set of 100+ widgets) where every widget is a custom implementation that displays a set of data (fetched using REST call) in a specific way. I've read tons of blog posts, stackoverflow questions and the official AngularJS docs but I cannot figure out how should I design my application to handle there requirements. Looking at demo apps, there is a single module (ng-app) and when constructing it in the .js file the dependent modules are declared as its dependencies, however i have a big set of widgets and somehow it's not advisable to describe them all there. I need suggession for the following questions:
- How should I design my app and widgets - should i have a separate AngularJS module or each widget should be a directive to the main module?
- If I design my widget as directives, is there a way to define dependency within a directive. I.e. to say that my directive uses ng-calender in its implementation?
- If I design each widget as a separate module, is there a way to dynamically add the widget module as a dependency to the main module?
- How should I design the controllers - one controller per widget probably?
- How should i separate the state (scope) if i have multiple widgets from the same type in the view?
- Are there bestpractices for designing reusable widgets with AngularJS?
EDIT
Useful references:
- ocLazyLoad - great lazy loading lib for AngularJS
- Seed project - modules + lazy loading on route change (ES6, systemjs, ocLazyLoad)
- Lazy loading in AngularJS
- Dynamically Loading Controllers and Views with AngularJS and RequireJS
- Loading AngularJS Components With RequireJS After Application Bootstrap
- Demo project about lazy loading of AngularJS resources on GitHub
- Load On Demand project
- Inject module dynamically only if required
- Another lazy loading in Angular article
- Code Organization in Large AngularJS and JavaScript Applications