Writing AngularJS Apps Using ES6

  • The following snippet creates these WeakMaps and the class HomeController:
    const INIT = new WeakMap();
    const SERVICE = new WeakMap();
    const TIMEOUT = new WeakMap();

    class HomeController{
    constructor($timeout, bookShelfSvc){
    SERVICE.set(this, bookShelfSvc);
    TIMEOUT.set(this, $timeout);
    INIT.set(this, () = {
    = {
    this.books = books;


    markBookAsRead(bookId, isBookRead){
    return isBookRead)

  • The this reference inside the arrow functions is same as the this reference outside, which is the current instance of the class
    The new syntax for creating a method and attaching it to an object without using the function keyword
    Let’s apply dependency injection and register this class as a = [‘$timeout’, ‘bookShelfSvc’];
    export default HomeController;

    As you see, there is no difference in the way that we applied dependency injection — it is same as the way we do in ES5.

  • The following snippet creates the factory class and registers the static method as a factory:
    var HTTP = new WeakMap();

    class BookShelfService
    HTTP.set(this, $http);

    return = result.data );

    return = result.data );

    markBookRead(bookId, isBookRead){
    return {bookId: bookId, read: isBookRead});

    return }

    return = result.data );

    return book);

    static bookShelfFactory($http){
    return new BookShelfService($http);
    = [])

  • factory(‘bookShelfSvc’, default moduleName;

    This snippet uses the following additional features of ES6 (in addition to classes and arrow functions):
    A static member in the class
    String templates to concatenate the values of variables into strings
    Defining Directives
    Defining a directive is similar to defining a factory, with one exception — we have to make an instance of the directive available for later use inside the link function, because the link function is not called in the context of the directive object.

  • var Q = new WeakMap();
    const SERVICE = new WeakMap();

    class UniqueBookTitle
    constructor($q, bookShelfSvc){
    this.require=’ngModel’; //Properties of DDO have to be attached to the instance through this reference

    Q.set(this, $q);
    SERVICE.set(this, bookShelfSvc);

    link(scope, elem, attrs, ngModelController){
    = function(value){

    return reject) = {
    result = {

This article explains how ECMAScript 6 can be used to write AngularJS applications.

@Spirix3: Hey, read your blog post at , loved it !! But i found a problem with the way you defined services in es6.

As many of you are aware, ECMAScript 6 is in its draft state now and is expected to be finalized some time this year. But it has already caught a lot of attention in the community and browsers have already started implementing it. We also have a number of transpilers like Traceur, 6to5, and many others that convert ES6 code to ES5 compatible code. Community members have started playing around with ES6 and many of them are blogging about what they learn. SitePoint’s JavaScript channel also has a good number of articles describing the different features of ES6.

It is possible to write any piece of everyday JavaScript using ES6. To do this, we need to be aware of the key features of ES6 and know which piece fits where. In this article, we will see how we can use features of ES6 to build different pieces of an AngularJS application and load them using ES6 modules. We will do this by building a simple online book shelf application and we will see how it is structured and written.

As ever, code for this application can be found on our GitHub repository.

The sample BookShelf application contains following views:

On the home page of the application, we need to add a reference to this library and the following script:

The app’s JavaScript code is divided into multiple files. These files are loaded into the main file using the ES6 module loader. As today’s browsers can’t understand ES6 modules, Traceur polyfills this feature for us.

to bootstrap the application as the modules are loaded asynchronously. This is the code contained in that file:

file using the following script tag:

AngularJS controllers can be defined in two ways:

from now on by using the controller as syntax.

Though classes in ES6 keep us away from the difficulty of dealing with prototypes, they don’t support a direct way of creating private fields. There are some indirect ways to create private fields in ES6. One of them is to store the values using variables at module level and not including them in the export object.

We will use a WeakMap to store the private fields. The Reason behind choosing WeakMap is that those entries that have objects as keys are removed once the object is garbage collected.

method to fetch all active books as soon as the controller loads. So, we need three WeakMaps. Let’s declare the WeakMaps as constants to prevent any accidental re-assignment.

The above snippet uses following ES6 features:

Let’s apply dependency injection and register this class as a controller:

class from this module.

imports these controllers and registers them to a module. This is the code from this file:

module exports the name of the AngularJS module it created, so that this can be imported into another module to create to create the main module.

“Service” is an overloaded term in general and in Angular as well! The three types of services used are: providers, services and factories. Out of these, providers and services are created as instances of types, so we can create classes for them. Factories are functions that return objects. I can think of two approaches for creating a factory:

service to perform Ajax operations. As it has to be a private field in the class, we will define a WeakMap for it.

The following snippet creates the factory class and registers the static method as a factory:

This snippet uses the following additional features of ES6 (in addition to classes and arrow functions):

function is not the same as the directive object. We can make the object available through a static field.

for promises.

The following snippet creates a directive which it registers with a module.

after the promise produces a result. The good thing is that promise API in AngularJS 1.3 supports a syntax similar to the ES6 promises.

Now that we have modules containing the directives, controllers and services, let’s load them into one file and create the main module of the application. Let’s begin by importing the modules.

The config block defines routes for the application. This can be a simple function as it doesn’t have to return any value.

file for manual bootstrapping.

Hopefully this gives you an insight into using ES6 to write AngularJS apps. AngularJS 2.0 is being written completely using ES6 and as web developers we need to be aware of the way we have to write our code in the near future. ES6 solves many problems that have been bugging JavaScript programmers for years and using it with AngularJS is a lot of fun!

And please remember, the sample code for this application can be found on our GitHub repository.

Writing AngularJS Apps Using ES6

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.