Name: Getting started with Angular + JSPM + ES6
Uploaded: 2015-04-11T19:45:57-05:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/angularjs-getting-started-with-angular-jspm-es6/subtitles

Getting started with Angular + JSPM + ES6

[00:01] 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.

[00:08] 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.

[00:21] 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.

[00:29] 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.

[00:51] 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.

[01:09] 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.

[01:22] 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.

[01:45] 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.

[02:06] All we have to do now is, we can get rid of this, and now we can import Angular from Angular.

[02:12] 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.

[02:41] 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.

Getting started with Angular + JSPM + ES6

Share this video with your friends