- Published on
Angular widgets in Sitefinity
- Steve McNiven
The problem we need to solve here is that “widgets” can be placed anywhere on a page, and so if your “widget” needs to be an ng-app (which I like to do) it’ll just break everything because there can only be ONE ng-app declaration on a page. Which clearly conflicts with how sitefinity works in that it allows users to drag on whatever they want, whenever they want.
The way to solve this is to bootstrap in the widgets in your script, it’s super easy, here’s how I did it. Now I always have jQuery in here anyway, but some variant of this would clearly be fine.
In a nutshell you just search the page for your widget (clearly class since Ids have to be unique on the page and a widget can be placed any number of times). Then create a unique app id and chuck it into angular.bootstrap! We need to pass in the dom element so it knows what to bind the app to, but this works quite well.
You can also add angular right into the widgets cshtml so it’ll load on the fly instead of putting it in the layout which would throw it on every page, even the pages that don’t use this widget. The @Html.Script helper will make sure the script is only loaded once site-wide.