ES6 AngularJS TodoMVC

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <title>Await Demo</title>
  <title>AngularJS ES6</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//rawgithub.com/daneden/animate.css/master/animate.min.css" />
  <link rel="stylesheet" href="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.min.css" />
  <link rel="stylesheet" href="style.css" />
  
  <script src="//code.angularjs.org/1.2.13/angular.min.js"></script>
  <script src="//code.angularjs.org/1.2.13/angular-animate.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.9.0/ui-bootstrap-tpls.js"></script>
  <script src="//rawgithub.com/marcorinck/angular-growl/master/build/angular-growl.js"></script>
</head>

<body ng-controller="TodoController as tc"> 

  <div class="container">
    <div growl></div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">TodoMVC with ES6 and Animate.css</h3>
          </div>
          <div class="panel-body">
            <form ng-submit="tc.addTodo()">
              <input type="text" ng-model="tc.newTodo" class="form-control" placeholder="New todo item goes here, then press Enter" focus>
            </form>
            <br>
            <div class="list-group">
              <div class="list-group-item todo-item" ng-repeat="item in tc.items" ng-class="{'todo-complete': item.complete}">
                <span class="close" ng-click="tc.removeTodo($index)">&times;</span>
                <label>
                  <input type="checkbox" ng-model="item.complete">
                  <span ng-bind="item.text">This is the content of the Todo</span>
                </label>
              </div>
            </div>
            <button class="btn btn-block btn-danger" ng-click="tc.clearAll()">Clear All Items</button>
          </div>
        </div>
      </div>
    </div>
        <div id="box">Howto Traceur: <a href="README.html">README</a></div>
  </div>

  <script src="TodoController.js"></script>

</body>

</html>

# Using ES6 files in Plunker

Plunker now supports the transpilation of ES6 files to ES3? so that these can be
run in all supporting browsers.

This is done by using Google's `traceur-compiler` in the backend to transform
`*.es6.js` files into `*.js`.

## Using this feature

Create a file with the extension `.es6.js` and code away in ES6 to your heart's
delight.

In your main html file, refer to the same script as above except strip out the
`.es6` part so that an ES6 file named `script.es6.js` is linked in your html as
`script.js`.

*index.html*

```html
<script src="script.js"></script>
```

*script.es6.js*

```javascript
let something = "ES6 scoped variable!";
```

var app = angular.module('plunker', ['ngAnimate','angular-growl'])

/**
 * Will be compiled into a function that can take the constructor parameters
 */
class TodoController {

  /**
   * Here you can use inject all the usual stuff, $http, $route...
   */
  constructor($scope, $log, growl) {
    this.$scope = $scope;
    this.$log = $log;
    this.growl = growl;

    // Everything living on "this" will be available to the templates as "main"
    this.newTodo = "";
    this.items = [new TodoItem('This is a demo todo.', true)];
  }

  /**
   * All methods located on the body of the class will also be available to the named controller
   */
  addTodo() {
    // notice `Template String` syntax
    this.growl.addInfoMessage(`${this.newTodo}...added`, {ttl: 3000});
    this.items.push(new TodoItem(this.newTodo, false));
    this.newTodo = "";
  }

  removeTodo(index) {
    let anItem = this.items.splice(index, 1);
    this.growl.addWarnMessage(`${anItem[0].text}...removed`, {ttl: 3000});
  }

  clearAll() {
    this.items = [];
    this.growl.addErrorMessage('All Clear', {ttl: 3000});
  }
}

class TodoItem {
  constructor(text, completed) {
    this.text = text;
    this.completed = completed;
  }
  toggle() {
    this.completed = !this.completed;
  }
}

// We tell angular to use the TodoController constructor function to create it.
app.controller('TodoController', TodoController);

/* Todo Animations on testing page
-------------------------------------------------- */

.todo-item {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
}
.todo-item label {
  display: block;
}
.todo-item.ng-enter {
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}
.todo-item.ng-leave {
  -webkit-animation: bounceOut 1s;
  -moz-animation: bounceOut 1s;
  -ms-animation: bounceOut 1s;
  animation: bounceOut 1s;
}
.todo-complete {
  background: #f3f3f3;
  color: #777;
}
.todo-complete label {
  text-decoration: line-through;
}

/* growl fix 
-------------------------------------------------- */
.growl {
    position: fixed;
    top: 60px;
    right: 10px;
    float: right;
    width: 250px;
    z-index:10;
}