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.
ng-repeat ( which you are already using)
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.