Friday 14 June 2013

AngularJS code editor using UI-Bootstrap and CodeMirror (done without using jQuery)

I’m adding a number of AngularJS views to TeamMentor, and here is a simple HTML based source code editor inspired on the How to Integrate Codemirror With Angular UI post and ui-codemirror repository.

In the end, these are the APIs I used:
And this is what it looks like:

image

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:

image

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):

First we load the Javascript and CSS:

image

... them set up AngularJS module and codeMirror value

image

... use a controller to get the code to show (using $http.get) and assign it to the the $scope.code variable

image

... configure angularJS in the HTML by setting the textarea element to be a codemirror (linked to the $scope.code model)

image

... finally show the current value of $scope.code  in side an bootstrap alert element

image


Complete Source code:
<!DOCTYPE html>

<html>
    <head>
        <title>CodeMirror with AngularJS</title>
        <link  href="/Content/bootstrap.min.css"                    rel="stylesheet">
        <script src="/Scripts/angular.min.js"                      type="text/javascript"></script>
        <script src="/Scripts/angular-ui.js"                       type="text/javascript"></script>
        <script src="/Scripts/ui-bootstrap-tpls-0.3.0.min.js"      type="text/javascript"></script>

        <link  href="/Content/codemirror-3.01/codemirror.css"       rel="stylesheet"/>
        <link  href="/Content/codemirror-3.01/theme/rubyblue.css"   rel="stylesheet"/>
        <script src="/Scripts/codemirror-3.01/codemirror.js"       type="text/javascript"></script>
        <script src="/Scripts/codemirror-3.01/mode/javascript.js"  type="text/javascript"></script>


        <script type="text/javascript">
            var myApp = angular.module('myApp', ['ui', 'ui.bootstrap']);

            myApp.value('ui.config',
                {
                    codemirror:
                    {
                        mode: 'javascript',
                        lineNumbers: true,
                        matchBrackets: true,
                        theme: 'rubyblue'
                    }
                });

            function codeCtrl($scope,$http)
            {
                $scope.docLocation = document.location.href;
                $http.get($scope.docLocation)
                        .success(function (data)
                            {
                                $scope.code = data;
                            });
                //$scope.code = "var a = 'somecode'; \n//which also shows above</h1>";
            }
        </script>
    </head>
    <body ng-app="myApp">
        <div class="well well-large">
            <div class="container">
                <h2>CodeMirror working with AngularJS and Bootstrap</h2></div>
            </div>
        <div ng-controller="codeCtrl">
            <div class="container">

                <h4>Code Editor:</h4>
                <p>With the the contents of this page (i.e.: {{docLocation}} )</p>

                <textarea ui-codemirror ng-model="code"></textarea>

                <br/><hr/><br/>

                <h4>Bootstrap alert style</h4>
                <p>
                    Showing in real time the contents of the code shown above (make a change to try it)
                </p>
                <alert type="success">{{code}}</alert>
            </div>
        </div>
    </body>
</html>