Recently I’ve been working on a CMS platform in AngularJS.
Typically CMS’s have a lot of forms. Forms are ugly.
The design decision was to limit the amount of screens and forms needed by combining the Read/Edit screen into one with a simple toggle that gracefully transitions between the two states.
Here is a high level overview on how it works
A custom directive is used to extend ng-model to work on non input elements (div/p/li) etc. This means the model is live updated as you edit, and totally safe when you are not editing. This means the same template could be use for frontend/admin.
When in “edit” mode, the HTML5 contenteditable attribute is used for text input and the appropriate css classes are added for editing.
For dropdowns, I forked and simplified a version of angular-dropdown, which is used for dynamic populating/updating the select items. https://github.com/thewaterbear/angular-dropdowns
Everything is tied together with CSS transitions using ng-class. The DB calls are made using angular $http.
More to come soon!