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.
A noble goal! And something that might be worthwhile eventually. But not right now. Focus on the main problem — learning Angular 2 — and put the build system and other mechanics aside for now.
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
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)
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
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.
This contains an
h1 tag. Amazing, I know. Change its contents, refresh the page, and watch the magic take place.
Here’s the component definition for
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.