Quickstart | Angular 2

Last modified: July 11, 2017

If you're looking for a quick tutorial on Angular 2, then look no further! This tutorial covers the basics of Angular 2, from initial set up to working with things like directives and services. Below we will be creating a quick Angular 2 project from the ground up. While this tutorial assumes a basic understanding of javaScript and Node.js, it should be easy to follow regardless of your experience coming in.

Getting started

If you don't have Node.js installed, you can download it here. It is important to note that Node.js and Angular 2 are mutually exclusive. You don't need one to use the other. Angular 2 is a front end framework that can be supported by any back end web server. Since Angular 2 is all javascript, using Node keeps everything consistent. For more on why Node.js is the right choice, see Why Node?

If you've worked with Node before, then you know that every project starts with the package.json file. Create an empty folder for your project and add the following package.json file.

package.json

{
"name": "angular2",
"version": "1.0.0",
"scripts": {
"start": "concurrent "npm run tsc:w" "npm run lite" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "*",
"systemjs": "*",
"es6-promise": "*",
"es6-shim": "*",
"reflect-metadata": "*",
"rxjs": "*",
"zone.js": "*"
},
"devDependencies": {
"concurrently": "*",
"lite-server": "*",
"typescript": "*",
"typings":"*"
}
}

This file tells npm which packages to include in your project. Before we run npm install to generate our node modules, let's include a few more configuration files that are more specific to Angular 2. In the same root directory, create a tsconfig.json file.

tsconfig.json

{
"compilerOptions": {
"target":"es5",
"module":"system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

Angular 2 uses TypeScript, a superset of javaScript that compiles down to plain old javaScript at runtime. TypeScript follows the ES6 standard and keeps code more readable and organized. The tsconfig.json file simply configures the specifics behind how your TypeScript files will be compiled into javaScript files at runtime.

The last big piece of configuration that's useful is a typings.js file. Add a file named typings.json to the same root directory.

typings.json

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
}
}

For this tutorial, you probably won't be relying on this too much. The typings.json file imports the 'typings' from third party libraries that aren't inherantly TypeScript friendly. Most things you write for your Angular 2 app are already recognized by the compiler but this configuration file includes any typings for libraries that would otherwise not be recognized by the compiler at runtime.

Finally run npm install to populate your node modules and install dependencies.

Hello World

Now that you've got your environment set up it's time to see Angular 2 in action. Create an index.html in the root directory of your project with the following code:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Hello World </title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js'></script>
<script src='https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js'></script>
<script src='https://code.angularjs.org/tools/system.js'></script>
<script src='https://code.angularjs.org/tools/typescript.js'></script>
<script src='https://code.angularjs.org/2.0.0-beta.6/Rx.js'></script>
<script src='https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js'></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': './app' }
});
System.import('app/environment_main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html

NOTE: spacing can matter. Make sure that your script tags are being recognized by your text editor!

In our index file, we've included the basic libraries necessary for Angular 2 development. In our System.config({ clause we specify the transpiler (typeScript) as well as the package (or directory) where our app files will live. Also notice that we've specified a default .ts (typeScript) extension for our application. Finally, notice that we've imported our main component from the specified path: 'app/environment_main'.

Since we've specified the main component for our app, let's go ahead and create one. To keep things consistent with our path, under your app folder create a new file called environment_main.ts (just like the referenced file in our import statement).

environment_main.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './environment_app.component'

bootstrap(AppComponent);

This file imports the bootstrap method, which specifies a component to use as the root of your Angular 2 app. Also notice how we've imported a new file ,environment_app.component, as our base componenet. Let's go ahead and create this now.

environment_app.component.ts

import {Component, View} from 'angular2/core';

@Component({
selector: 'my-app'
})
@View({
template: '<h2>Hello World!</h2>'
})

export class AppComponent {
//controler logic etc. goes here
}

Components are at the cornerstone of Angular 2 app development. You can almost think of them as self-containing programs with their own templates and logic. They are reusable and are responsible for rendering themselves and including other dependencies. Notice how our main component has it's own template. This template is injected into the DOM wherever the browser finds the selector <my-app>.

Wrapping up

From the command line, navigate to the root directory and run npm start. If all went according to plan, you should now be able to access your new application from the browser. The console will tell you which port your app is running on (in this case localhost:3000). Navigate to the local address in your browser and you should see the header text reading Hey, what's up, Hello!.

Nothing too fancy, but this incorporates everything needed to get you up and running with Angular 2. From here, you can start looking further into Directives and Services as you bring your web app to life!

Responses:

sparkdoopz
August 11, 2017
angular 2 has come a long way this year. if you are just getting started with Angular 2, try using the Angular CLI. it makes getting started a breeze. this is quick tutorial, but using the CLI will make it even faster. i think stackchief has some good articles on getting started with Angular CLI so def worth checking those out as well...
He who must not be named
June 20, 2017
angular 2 sucks...but thanks for making it easy to figure out with this tutorial :p
vfvff
June 20, 2017
mflmfd
vfvff
June 20, 2017
mflmfd
Venu K.
May 11, 2017
Terry TypeScript,

Love the name. I agree that TypeScript is great for code organization, but it can really get in the way if you're a more traditional JS developer using ES5 standards. I get that we all need to adapt to the ES6 way eventually, but bringing type checking etc. to javaScript just makes it less fun in my opinion. I can see TypeScript being a big deal with enterprise projects with larger code base, but for smaller projects plain old JS is still the easiest and most fun...but if you are trying to learn Angular 2 then you should probably get used to it :)
Terry TypeScript
May 1, 2017
TypeScript is huge for js developers. i think TypeScript is the future of JS development (especially enterprise). when you are dealing with large scale projects, type checking is a must...it will keep things better organized and easier for people to hop in / out of different code bases without breaking everything...i have heard facebook is working on an inferred type checker for js..but who knows how long that will take.
Alex Sanders
April 19, 2017
i used to hate TypeScript and didn't see the point originally but with type checking you really can improve the development experience. it may seem like an extra effort but it will ultimately save you time in the long run.
Berry S.
April 7, 2017
what a great read on Angular 2. I feel like there is absolutely no information on Angular 2 out there yet..really quick way to get started..not a fan though. REACT.
Ferrah Joyce
March 22, 2017
great tutorial on angular 2. what a quick way to get started with this. not sure if i'll use it again but it made getting started a lot easier.
Ben
March 22, 2017
Angular2 is so bad....so bad...
Kiru V.
March 18, 2017
I am a enterprise Java developer so Angular 2 makes sense. TypeScript allows you to catch errors and makes your client side js code much more efficient. If you are used to Java and looking to get into client rich web apps, i highly recommend Angular 2. intuitive and more performant that angular 1.
Sumari K
March 16, 2017
this is hilarious. do this tutorial and then the Stackchief Quickstart React and you will see how much better React is. Angular 2 comes with way too many bells and whistles. tutorial was god though.
Sarah
March 12, 2017
Thanks this was easy to follow ...worked for me but whyyyy would anyone do this ha
Jerone Belmont
March 6, 2017
angular 2 is still much better than angular 1. it avoids all of the issues that so many of us have experienced with angular 1, primarily performance based stuff..
Steve Erickson
February 9, 2017
this was a great way to get started. I don't necessary like Angular 2 after this tutorial, but at least I know what I'd be getting myself into now!
Jerry Sanders
February 9, 2017
great read, helped a ton!

You might also like: