Angular 2 with ES6: How to Set It Up

You want to start playing with Angular 2, but don’t know where to begin?

All those different build tools and libraries. Is it the same as Angular 1? Has the build system changed?

Don’t worry about all that. Today, we’re going to get started in 2 minutes.

Reading only gets you so far. At some point, you’ve got to learn by doing. What better way than setting up a skeleton project and playing around?

1. Install Yeoman + Generator

We’ll start by installing Yeoman and an Angular 2 generator. Open up a Terminal and run:

$ npm install -g yo generator-angular2

2. Create the project

ng2-sandbox is as good a name as any. We’ll create a directory, cd into it, and then run yo to generate the skeleton app.

$ mkdir ng2-sandbox && cd ng2-sandbox
$ yo angular2

Yo will run npm install for you, which will take between 30 seconds and a year (depending). Then it’ll give you a command to run to kick it all off.

3. Try it out

Run the command it told you to:

$ ./node_modules/.bin/gulp dev

This should run the build and pop open a browser pointing at http://localhost:8000. You should see “ng-2-sandbox” (or something else, if you didn’t name your project directory ng2-sandbox).

Explore the grounds

You now have a fully functional (if very minimal) Angular 2 app, built in ES6, transpiled to ES5 live in the browser.

Let’s take a look at what you got for your money:

src
├── index.html
├── index.js
├── ng-2-sandbox.html
└── ng-2-sandbox.js

(there are a few build-related files in the project directory that we’ll just ignore)

index.html

Open this up and notice that it includes angular2.js, along with some other libraries, and then calls System.import('index') – this is what loads index.js

index.js

This defines the Main component. You can see on line 5 that selector: 'main', matches the <main>...</main> tag in index.html. The view references a component called Ng2Sandbox, defined in another file.

ng-2-sandbox.html

This contains an h1 tag. Amazing, I know. Change its contents, refresh the page, and watch the magic take place.

ng-2-sandbox.js

Here’s the component definition for Ng2Sandbox.

What now?

Not sure what to try next? Why not replicate the functionality of the app from the Angular 2 in Plain JS article? You’ll create a few new components and try out the new *ng-for syntax (the replacement for ng-repeat) – and, of course, get a taste for converting ES5-style Angular 2 into ES6.

By the way, now is an excellent time to sign up for future Angular 2 articles! I’ll be going into more detail on Angular 2 as well as TypeScript and ES6, so if you want to stay ahead of the curve, put in your email below!

Thanks for reading.