A while ago I had a case where I needed to implement a rich text editor in my custom webpart. I searched for answers. If you use some built-in field from SharePoint it is not editable in other browsers than Internet Explorer. I wanted the same experience as a wiki page where you can use the Ribbon. In this blog post I’ll show you how to implement this entirely in javascript, with no additional server side fields..

It has already become a series of posts in my blog about the combination of AngularJS and SharePoint:

• AngularJS: prevent form validation in Page Edit Mode
• angular jQuery UI autocomplete
• AngularJS: sync $location.search with an input value

And it will be more. Some of them are a pure angular stuff, some of them are really for SharePoint. In this post post I’ll show how to create a directive for a sharepoint modal dialog (SP.UI.ModalDialog). There is already a modal dialog implementation in the Angular UI project, but it uses the bootstrap modal dialog. But it custom attributes for angular">is not that hard to create an own directive for showing sharepoint modal dialogs. I’ve called the new directive ng-sp-modal (ngSpModal). Here is this:

Angular JS is one of the most developed MVC frameworks in the javascript world. Angular UI is a huge UI-centric extension of AngularJS (it is more or less like jQuery UI to the jQuery). It uses much jQuery UI and Twitter Bootstrap and provides many own components like modal dialogs, maps, tooltips, masked inputs and much more. And all this is easy to implement in your code just by adding a directive:

<input ui-date>

Much cleaner than listening on $(document).ready, traversing the DOM and appending the datepicker in your code: