Quickstart | Angular 2

Quickstart | Angular 2

January 10, 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!


Join the conversation...



Submit

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 :)
Posted by Venu K. on May 11, 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.
Posted by Terry TypeScript on May 1, 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.
Posted by Alex Sanders on April 19, 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.
Posted by Berry S. on April 7, 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.
Posted by Ferrah Joyce on March 22, 2017
Angular2 is so bad....so bad...
Posted by Ben on March 22, 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.
Posted by Kiru V. on March 18, 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.
Posted by Sumari K on March 16, 2017
Thanks this was easy to follow ...worked for me but whyyyy would anyone do this ha
Posted by Sarah on March 12, 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..
Posted by Jerone Belmont on March 6, 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!
Posted by Steve Erickson on February 9, 2017
great read, helped a ton!
Posted by Jerry Sanders on February 9, 2017



More by the stackchief