<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<title>AngularJS ES6</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.min.js" data-semver="1.2.13"></script>
<script src="script.js"></script>
</head>
<body ng-controller="EmailController">
<div class="row">
<div class="well well-lg">
<button type="button" class="btn btn-danger" ng-click="sendEmail('sumo@demo.com')">Send Email</button>
<div>{{ email }}</div>
</div>
</div>
</body>
</html>
Demo AngularJS using ES6
Need help: it is working when send2() methoded is used not send().
# 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', []);
class EmailService {
constructor($log) {
this.$log = $log;
this.content = "";
}
awaitTimeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
send(recipient) {
this.$log.info('sending email....');
await awaitTimeout(10);
this.$log.info('done....');
return `sending ${this.content} to ${recipient} ....`;
}
send2(recipient) {
this.$log.info('sending email....');
return `from send2: sending ${this.content} to ${recipient} ....`;
}
}
app.service('EmailService', EmailService);
app.controller('EmailController', function ($scope, EmailService) {
$scope.email = "initial...";
EmailService.content = 'Greeting !';
$scope.sendEmail = function (recipient) {
//$scope.email = EmailService.send(recipient);
$scope.email = EmailService.send2(recipient);
}
})