Quickstart | Angular 2
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));
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html
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!
