Over a million developers have joined DZone.

Three Shades of Angular

DZone's Guide to

Three Shades of Angular

After years of building business apps with Angular, I find it helps facilitate some incredible scenarios. Read on to learn more.

· Web Dev Zone
Free Resource

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

angular ,webdev

Published at DZone with permission of Jeremy Likness, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}