Using Ace editor into Angular applications

Ace is a powerful code editor for Web environments. It can be easily embedded within our HTML / JavaScript / CSS applications. Moreover the project Angular UI (link) provides an integration to use easily code editor within Angular applications. See this link for the project home page.

Configure Ace dependencies in Bower

We suppose here that we use Bower for our dependencies. Its by default the case when creating the project structure for an Angular application using Yeoman.

In this context, configuring Ace and its support for Angular simply consists in adding corresponding dependencies in the Bower configuration file:

  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
    "angular": "1.2.26",
     "angular-ui-ace": "0.1.1",

To prevent from strange behaviors, we will explicitely set the files we want to use from the Ace library. This can be donne using the element overrides in our Bower configuration file, as described below:

  "name": "myapp",
  "version": "1.0.0",
  "dependencies": {
  "overrides": {
    "ace-builds": {
      "main": [

Using an Ace editor within HTML

To add an Ace editor in an Angular view, we simply need the directive ui-ace provided by Angular UI. It allows to define general properties such as theme and language.

To be able to use this directive, the module ui.ace must be included as dependency in the Angular application, as described below:

angular.module('myapp', [

This directive is based on the attributes ui-ace. Its value corresponds to a JSON structure defining the configuration properties of the editor.

Here are the properties that can be used at this level:

  • mode. The language the editor will contain.
  • theme. The theme to use. The corresponding js file must have been included in the application.
  • useWrapMode. Tells if the line wrapping is enabled or not.
  • showGutter. Tells if the editor gutter is enabled
  • firstLineNumber. The line number of the first line displayed in the editor. The default value is 1.

Following code describes how to use this directive:

<div ui-ace="{
        mode: 'json',
        theme: 'idle_fingers',
        useWrapMode: true,

This directive fits well within the bidirectional binding feature of Angular. This means that the attribute ng-model can be used with the directive to specify the element of the associated context to be linked with. Following code describes how to use this attribute:

Other attributes allows to interact with the editor itself by specific JavaScript callbacks. The latters must be present in the associated Angular context. Here is the list of these callbacks:

  • onLoad. This function is called when the editor has finished to load. A parameter corresponding to the editor instance is provided.
  • onChange. This function is called when the data displayed by the editor are updated.
  • onBlur. This function is called when the editor is blurred.

Following code describes how to configure these callbacks:

<div ui-ace="{
        onLoad: aceLoaded

Lets define now these callbacks in our Angular application.

Interact with an Ace editor with Angular

Interaction with the editor can be done within callbacks with JavaScript. An instance of the editor is provided as parameter. We can use it to do further configurations, manage it or interact with it.

Following code describes how to set an Ace editor read-only:

$scope.aceLoaded = function (_editor) {
    // Options

We dont tackle all the capabilities provided by the Ace editor JavaScript API. For more details, we can have a look at this page:

This entry was posted in Angular, Tips, Web2 and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s