In the end, these are the APIs I used:
- http://codemirror.net/ (just the core bit)
The source code editor is showing the contents of the current page (dynamically fetched using Angular $http.get) and the bottom yellow div is showing (in real-time) the contents of the source code editor:
What is nice about this example is that I didn’t use jQuery at all!
The great posts http://stackoverflow.com/a/15012542 and AngularJS for jQuery Developers explain why learning to code in Angular without JQuery is so important.
Basically, it's better not have jQuery available, since them, the only way to solve a problem, is the ‘AngularJS way’ :)
How it works:
Here is a brief explanation of the code behind this PoC (included in full at the end of this page):
... them set up AngularJS module and codeMirror value
... use a controller to get the code to show (using $http.get) and assign it to the the $scope.code variable
... configure angularJS in the HTML by setting the textarea element to be a codemirror (linked to the $scope.code model)
... finally show the current value of $scope.code in side an bootstrap alert element
Complete Source code: