Writing AngularJS Apps Using 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 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 that convert ES6 code to ES5 compatible code. Community members have started playing around ES6 and many of them are blogging what they learn. SitePoint's JavaScript channel also has a good number of articles describing different features of ES6.

It is possible to write any piece of JavaScript that we are writing everyday 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 can we use features of ES6 to build different pieces of an AngularJS application and load them using ES6 modules to make them work on a page. The sample code contains a simple online book shelf application. We will see how it is structured and written.

A Note on the BookShelf application

The sample BookShelf application contains following views:

1. Home page: Shows a list of active books and books can be marked as read and moved to archive from this page


2. Add book page: Adds a new book to the shelf by accepting title of the book and name of author. It doesn't allow a duplicate title


3. Archive page: Lists all archived books

Setting up Application for ES6

As we will be using ES6 to write the front-end part of the application, we need a transpiler to make the ES6 features understandable for all the browsers. We will be using traceur client side library to compile ES6 script on the fly and run it on the browser. This library is available on bower. Sample code has an entry for this library in bower.json.

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

[js] traceur.options.experimental = true; new traceur.WebPageTranscoder(document.location.href).run(); [/js]

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

In the sample code, the Bootstrap.js file is responsible for loading the main AngularJS module and manually bootstrap the Angular app. We cannot use ng-app to bootstrap the application as modules are loaded asynchronously. Following is the script in this file:

[js] import { default as bookShelfModule} from './ES6/bookShelf.main'; angular.bootstrap(document, [bookShelfModule]); [/js]

Here, bookShelfModule is name of the AngularJS module containing all the pieces. We will see content of the bookShelf.main.js file later. The bootstrap.js file is loaded in index.html file using the following script tag:

[html] [/html]

Defining Controllers

AngularJS controllers can be defined in two ways:

1. Controllers using $scope


2. Using "controller as" syntax

Second approach fits better with ES6, as we can define a class and register it as a controller. The properties associated with an instance of the class would be visible through alias of the controller. In addition, the "controller as" syntax is comparatively less coupled with $scope. If you are not aware, $scope would be removed from the framework in Angular 2. So, we can train our brains to be less dependent on $scope 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 for 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 the module level and not including them in export object.

Continue reading %Writing AngularJS Apps Using ES6%

by Ravi Kiran via SitePoint