This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Getting started with Angular + JSPM + ES6

3:04 Angular 1.x lesson by

JSPM allows you to load any client package from github and npm in any module format. Learn how to use it to create a great workflow with Angular and ES6.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

JSPM allows you to load any client package from github and npm in any module format. Learn how to use it to create a great workflow with Angular and ES6.

Avatar
Ryan

Will there be a follow up to this? I would like to know how to structure an angular 1.x app using es6 modules. I have seen a range of seed projects but no real common implementations. A few couple I noticed was enabling strictDi and using angular.bootstrap() instead of ng-app . I would love to get more direction on how to use tools like systemjs to build an angular app (todo app even!) thanks!

In reply to egghead.io
Avatar
Robert

Audio level is quite low in this one.

In reply to egghead.io
Avatar
Kendrick

How do you incorporate JSPM into a production build?
Specifically I need to transpile LESS to a concatenated app.css, and I need to pre-process *.js with ng-annotate prior to transpile + minify for the bundle.

At the moment the only path I can see is to use gulp to pre-process the sources and output the compiled files into a build folder then bundle from that folder, although this creates some consternation over how to structure the app with the remaining static assets.

I want to be able to run a watch on the files, edit, auto-compile and reload the browser and run tests.

When I am done, run bundle and process all files into an index.html, one or more bundle.js and my image/font folders.

Then Deploy the final package and run e2e tests.

Finally archive the zipped folder of assets.

How do we do all this?

In this lesson, we're going to talk about how to get started using jspm to create a really nice workflow when developing Angular applications with ES6.

To get started, we want to go ahead and npm install jspm here. I'm going to do it globally. Once we have jspm installed, we can go ahead and run jspm in it. I'm just going to walk us through these prompts.

Most of the defaults here are pretty good, we can change them at any time, but I'm going to make a change here from tracer to use Babel for our transpiling.

Now, jspm is going to create a package, .jason, for us which lists its own dependencies. It also creates this jspm packages folder here, where the dependencies for jspm live, and also the dependencies that we'll be downloading will go. Then it's going to config that .js where system .js uses to figure out where to load the modules that we will be importing later on.

To actually get started using jspm ES6 in our Angular app, we have to do a couple of things. The first thing is we have to add the system.js here, which jspm will use internally for the modules, and then we need to load up the config .js file for system .js to use for its configuration.

Once we have that, we can go ahead and call it system.import, and give it a path to the index of our actual application. In this case, I just have it in the app directory, in app.js, which is just a standard JavaScript file here, and not using ES6.

Once we save that, we get this alert from this app .js that says, "Hello." Right now, jspm just reads this as just simple ES5, but we can change that, and let's just say "let," and see what happens. Oh, we have to go ahead and say export a default, here, tell it that it's ES6, and there we go. That should get you started.

Using Angular, we can fetch it with jspm, so we can just run jspm install. I'm just going to say "i" for short, Angular. Jspm has a registry of very popular libraries and frameworks on GitHub that has already built shims for, so we can consume them with our ES6 modules. Angular is one of them, so you don't have to write a custom shim for it.

All we have to do now is, we can get rid of this, and now we can import Angular from Angular.

Let's go ahead and create a controller, and we'll say main controller here. I'm using the class syntax from ES6 to create our controller. Now we're going to register that controller on a module. I'll just call the module app, get rid of that, and let's go ahead and register the controller here. We'll call it main controller, and passive main controller class here, and then head over to our indexation here and bootstrap it with the actual ng app here, and call it app.

For the controller, we'll come over here and say ng controller, main controller as vm. What I'm going to do is take that title that we had in there and go ahead and put it in here, vm.title, and there we go. That's getting started with jspm, Angular, and ES6.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?