AngularJS + Traceur + ES6

Introduction

ES6 is something cools and you can write java like script in browser. And AngularJS is also cool but when it getting bigger, the problems is there because it looks mess and dirty and needs to find a way to solve the messy problems that occurs in big AngularJS. There is the reason why I tried AngularJS+ES6. I have write it down the things I have tried when I was playing with it. Hope it will help you.

Installation

Install traceur by npm is the best way.

npm install -g traceur

# Build something simple first

index.js and index.html are code as below.

'use strict';

class My {
    constructor($scope) {
        this._scope = $scope;

        this.hello = "hello hoge";
    }

    getMessage() {
        return "hoge message";
    }
}

angular.module("myapp",[])
    .controller("myCtrl", [ "$scope" ,My]);

 

<html ng-app="myapp">
<head>
    <title></title>
    <script src="http://google.github.io/traceur-compiler/bin/traceur.js"></script>
</head>
<body ng-controller="myCtrl as m">
    <div ng-bind="m.getMessage()"></div>
    <div ng-bind="m.hello"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="build.js"></script>
</body>
</html>

Then, compile index.js and name output file as build.js.

traceur index.js --out build.js

As you can see build.js are ES5 js file and if you take a looks at safari, chrome, you are able to see the messages “hello hoge”.

Compile Multiple JS files

When design big, splits it into several files is compulsory. In this sample, I tried to put all es6 files into a folder and name it “es6”. File structure looks as below.

├ es6
│ ├ index.js
│ ├ apple.js
│ ├ banana.js
│ └ watermelon.js
├ build.js
└ index.html
<html ng-app="myapp">
<head>
    <title></title>
    <script src="http://google.github.io/traceur-compiler/bin/traceur.js"></script>
</head>
<body>
    <ul>
        <li><a ui-sref="banana">Banana</a></li>
        <li><a ui-sref="apple">Apple</a></li>
        <li><a ui-sref="watermelon">Watermelon</a></li>
    </ul>
    

    <div ui-view></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="dist/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="build.js"></script>
</body>
</html>
'use strict';
/*jshint esnext: true */
/*global angular: false */

import Banana     from "./banana.js";
import Apple      from "./apple.js";
import Watermelon from "./watermelon.js";


angular.module("myapp",["ui.router"])
    .config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/banana");

        $stateProvider
            .state('banana', {
                url: "/banana",
                controller: Banana,
                controllerAs: "vm",
                template: "<div ng-bind='vm.hello'></div>",
            })
            .state('apple', {
                url: "/apple",
                controller: Apple,
                controllerAs: "vm",
                template: "<div ng-bind='vm.hello'></div>",
            })
            .state('watermelon', {
                url: "/watermelon",
                controller: Watermelon,
                controllerAs: "vm",
                template: "<div ng-bind='vm.hello'></div>",
            });
    });

Watermelon.js and banana.js are similar to apple.js. Only hello variables are different.

'use strict';

class Apple {
    constructor() {
        this.hello = "hello this is Apple";
    }
}

export default Apple;

Finally, compile it.

traceur es6/* --out build.js

All es6 js files are kept in es6 folder, traceur can debug them by set scripts path to es6/*.

Where is scope?

At the first example I showed, scope have been declared but never been used. In case above, both of two this or $scope are works well. But as Angular2 are stop using $scope, and in $scope are not good looks with OOP design, $scope is not good idea anymore.

Reference Site

http://victorsavkin.com/post/99998937651/building-angular-apps-using-flux-architecture
http://www.sitepoint.com/writing-angularjs-apps-using-es6/
https://github.com/mvolkmann/todo-es6

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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