17 Jun A small angular APP
Intro
Recently, we decided that it was time for Arca Digital to jump into the EcmaScript 6 bandwagon. There’s plenty of features that are now supported natively in most modern browsers, some of them, such as Arrow functions, String interpolation and Modules are quite attractive to us.
We also had become interested on Angular.js, which is a mighty fine framework for creating dynamic web apps.
Testing EcmaScript 6 on a modern browser:
Let’s try running some tests to verify we have access to those features I mentioned on Ecmascript 6. In theory they should work just fine, as stated in websites such as https://kangax.github.io/compat-table/es6 and http://pointedears.de/scripts/test/es-matrix/#features
First test: using Arrow functions
Note how we’re using several EcmaScript features here:
- The let statement, instead of var. This allows us to define variables that are limited in scope to the block, statement or expression where they are used.
- Arrow functions (also known as Lambda expressions):
(param) => { ...code... }This is actually the feature that attracts me the most. I love lambda expressions in C# and their expressive power. - String interpolation: using the ` character instead of quotes, we can embed variables in a string literal. Nice syntactic sugar.
Second test: Modules
We have had to deal with the oddities of Javascript’s way of dealing with multiple source files. There are plenty of JS libraries trying to solve the dependency problem, i.e. RequireJS, Dojo, CommonJS. Finally we have a native solution to this issue.
Let’s try it up.
main.js
// Main program
import multiplyText, x from "myLibrary"
console.log(multiplyText(x, 5));
myLibrary.js
// A typical library, exporting some stuff
export var multiplyText = (text, count) => { Array(count-1).join(text); };
export var x = "Marks the spot";
It doesn’t work !! At least not in Firefox, Chrome or Microsoft Edge. What’s wrong??
The problem is that EcmaScript 6 is not fully supported. Modules, as useful as they could be, aren’t yet supported. Bugger!
Of course, by the time you read this, it might already be supported, but when I wrote this on June/2016, it wasn’t supported.
We’ll have to continue using Require.js for a while. Ah, the perils of living in the bleeding edge.
Now, for some Angular love
Can we use Angular.JS (version 1.5) with EcmaScript 6? I think it is perfectly possible. Let’s try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<title>Ecmascript 6 + Angular.js (V1.5)</title>
<script src="lib/angular.js"></script>
<script src="main.js"></script>
</head>
<body onload="start()">
<h3>Simple demo of Angular.JS + Ecmascript 6</h3>
<div ng-app>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
And the result:
Simple demo of Angular.JS + Ecmascript 6
Hello {{yourName}}!
Sorry, the comment form is closed at this time.