Custom widgets in AngularJS

I have a list of HTML widgets which are created dynamically from server data like this (Jade):

.area(ng-repeat="widget in widgetsList.widgets")
    h3 {{widget.title}}
    p {{widget.type}}
    span {{widget.data}}

Widgets are not of the same structure and I don't want to show them visually equal because each of them represents its own functionality. The paragraph in the end of the example just puts data json as a string that I obviously need to render as a proper html widget according to its type that looks like 'important-messages-widget' or 'recent-events-widget'.

Angular looks pretty good but lacks of detailed documentation. How should I manage this case?

In Angular there are two built in directives that are really what makes angular soo powerful.

  1. ng-repeat ( which you are already using)

  2. ng-switch This seems to be most often misunderstood or not understood or something to that effect by most developers. It gives you the power of a switch statement in your normal programming language in html.

http://docs.angularjs.org/api/ng.directive:ngSwitch

The doc's for it should provide you a good starting point. Combining ngSwitch with ng-repeat will give you a very powerful way of representing your view.

<div ng-switch on="widget.type" >
    <div ng-switch-when="important-messages-widget">Important Message</div>
    <div ng-switch-when="recent-events-widget">Recent Events ---add more html here </div>
</div>

Hope this helps.