Background

I’m a fanatic about authoring my JavaScript using ES2015 (ES6, Harmony) and using jspm as my package manager. This combination of language and package management is so clean and simple.

Scott’s course uses ES5. Probably a good decision as it keeps the concept count down for Angular 1.x developers who still use ES5.

I highly recommend you watch the course; in about 90 minutes you’ll be another convert to using Angular 1.5.x Components.

I have looked at both Aurelia and Angular 2. They are both still in beta and undergoing API and tooling changes. I’m very keen on Aurelia and am looking forward to adopting this product in the future. What I like most about Aurelia is that the team embraced convention over configuration which dramatically reduces the boiler maker code for common scenarios. Maybe Angular 2 will one day refactor their API to do the same.

Introduction

Authoring Angular 1.x or 1.5.x apps using ES6 with jspm is simple and the code is very clean. I have a project that demonstrates using Electron, Angular 1.x, ES6, and jspm. I will be creating a new project that uses Angular 1.5.7, Electron, ES6, and jspm very soon.

When using ES6 in today’s browsers or in Electron, the ES6 must be transpiled to ES5. jspm hides all that complexity and just does it for you.

Gulp also has a module called gulp_jspm with an option, “selfExecutingBundle” that will essentially pre-compile, bundle, and minify all of your application’s ES6 to ES5. Heck, it even removes all traces of ES6 libraries from the bundle.

Transpiling, bundling, and minification are part of “real world ES6 development.” I just like that jspm makes this process simple and almost 100% transparent.

Please note: jspm is not the only game in town. There are many other techniques, frameworks, build systems, etc., that accomplish the same task, producing the same end result. When I did my study last year, I found that jspm worked best for me. I recommend that you look at all the options and tools, read many blog posts on the subject just like I did. Then choose the one you understand and can be successful with.

Please note: This application does not take any dependencies on the volatile and changing Angular 2 Beta. The Component Router used in this project, is the original Angular 2 router and its works great. I strongly recommend staying away from Angular 2 dependencies until the team has had time to ship RTM bits and ensure they have an approved, and good story for Angular 1.5.x integration.

Additionally, I have yet to see a compelling reason to write production code in Angular 2. Like you, I have Angular 1.x projects in production and that run everyday and perform beautifully.

Application Startup

Before you can run off and write the next awesome app using Angular 1.5.7 Components and ES6 we need to learn how the application starts up. As you’ll see there are differences between the ES6 jspm code I’ll present and the current AngularJS 1.x ES5 apps you’re writing today.

index.html

Is loaded by the browser or Electron

Loads up system.js and config.js using script tags

The bootstrap.js module is imported. The act of importing a module causes it to execute

Notice you don’t see any Angular framework markup as we will be manually bootstrapping Angular.