In 2014 I presented at the Atlanta Code Camp and walked through building an AngularJS app starting from file … new. I used test-driven development to demonstrate how to create a functional application.
I also wanted to demonstrate an app with multiple controllers that communicate with each other yet don’t rely on $scope, $watch, or even event broadcasting.
You can view the source for the Angular health app, along with instructions to step through the build iterations, in this GitHub repository.
After years of building business apps with Angular I find it helps facilitate some incredible scenarios, like this total rewrite of a Silverlight audit tool I did for a local physicians’ group:
Both Angular and JavaScript have been moving at a fast pace and to keep up with the changes I created two new projects based on the original example app.
ECMAScript2015 (also known as ECMAScript 6 and ES 6) is right around the corner. This is a new version of the standardized JavaScript specification that introduces concepts like classes and built-in support for Asynchronous Module Definitions (AMD). Fortunately, you don’t have to wait for browsers to support ES6 because there are tools available now that allow you to write code in ES6 and “transpile” it to the current version, ECMAScript 5.
To see an example of that in action, check out the Angular ES6 Health App. This is the same application, rewritten using the new features built into ES6. It is compiled to ES5 using Babel. I also used the combination of browserify and babelify to transpile the project into a single file for performance (as opposed to dynamically loading the modules). Don’t worry, I have an example of dynamic loading in the third Angular example.
Being able to work on tomorrow’s technology today is fairly exciting. Another way to tackle ECMAScript 6 is to leverage TypeScript. This is a superset of JavaScript that closely follows future specifications and compiles to a target version of your choice. It is the language being used by the Angular team to build Angular 2.0.
If you want to see what the same app looks like using TypeScript and the next version of Angular (that as of this blog post is in beta), take a look at the Angular 2.0 Health App. This is the same app migrated to use Angular 2.0 beta, TypeScript, and AMD for dynamic module loading.
The migration wasn’t straightforward so I wrote about it along with my thoughts on Angular 2.0 in the post Angular 2.0: Opinions, Commentary, and a Migration Case Study.
I hope these different shades of Angular give you a good idea of what to expect and how to prepare today for tomorrow’s technology. I expect adoption of both ES6 and Angular 2.0 to be rapid in 2016. It was a great learning experience for me and I look forward to building more modern web apps with a newer JavaScript that has grown up to embrace the enterprise.
| Reference: | Three Shades of Angular from our WCG partner Jeremy Likness at the C#er : IMage blog. |
