Introduction to Angular 2, a hello world example

Angular is becoming the de facto standard for single page web development. It’s more than just another javascript library, it’s a framework, with templating, routing, ajax calls, and more bells and whistles. It's written in TypeScript, which is a super-set of javascript and must be compiled to javascript for browsers.

Node.js

For development in Angular 2, you need the current version of Node.js 6.2.1+. Node.js is used for it's package manager and the TypeScript-compiler. On Windows it’s recommended to use Cygwin for development. To check if you’ve got the right version, enter on the command-line:

$ node -v
v6.2.1


Next is to setup the development environment. Recommended is to use a web server environment like Apache to serve the html and javascript files, because ajax request don't work well on file://-urls.

 

Files

Download sample-ng2.zip or copy/paste the code below. The file structure will be,

 

package.json

npm is the package-manager for Node.js. The dependencies and configuration for npm is put in package.json. If you want to know all about the package.json check https://docs.npmjs.com/files/package.json


For now we use the following package.json

{
  "name": "intro-ng2",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc"
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "@angular/upgrade": "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

When the package.json is put in place, you can install the packages by typing,

$ npm install


This downloads and installs all the packages needed for the hello world example, including the TypeScript compiler which is written in Node.js. The repository/packages will be placed in the directory where npm is executed, in a subfolder called ‘node_modules’.

 

Index.html

Next an index.html file is needed,

<!DOCTYPE html>
<html>
<head>
<script src="ng2/node_modules/zone.js/dist/zone.js"></script>
<script src="ng2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="ng2/node_modules/systemjs/dist/system.src.js"></script>
<script>
/* map tells the System loader where to look for things */
var map = {
'app': 'ng2',
'@angular': 'ng2/node_modules/@angular',
'angular2-in-memory-web-api': 'ng2/node_modules/angular2-in-memory-web-api',
'rxjs': 'ng2/node_modules/rxjs'
}; /* packages tells the System loader how to load when no filename and/or no extension */
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, '@angular/common': { main: 'common.umd.js', defaultExtension: 'js' },
'@angular/compiler': { main: 'compiler.umd.js', defaultExtension: 'js' },
'@angular/core': { main: 'core.umd.js', defaultExtension: 'js' },
'@angular/http': { main: 'http.umd.js', defaultExtension: 'js' },
'@angular/platform-browser': { main: 'platform-browser.umd.js', defaultExtension: 'js' },
'@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.js', defaultExtension: 'js' },
'@angular/router': { main: 'router.umd.js', defaultExtension: 'js' },
'@angular/router-deprecated': { main: 'router-deprecated.js', defaultExtension: 'js' },
}; var config = {
map: map,
packages: packages
}
System.config(config); System.import('app/app.js').then(null, console.error.bind(console)); </script>
</head>
<body>
<h1>Intro ng2</h1>
<br />
<hello-world></hello-world>
</body>
</html>


Most of the code is mapping and configuration. The 'map'-hash is used to tell the Angular system loader where to look for things. When System.import('app/app.js') is called, Angular will load 'ng2/app.js', because of the mapping 'app' to 'ng2'.

The 'packages'-hash tells the loader how to load imports when no filename is given. If you just call System.import('app'), it will try to load 'ng2/main.js',

  1. 'app' will be translated to 'ng2'
  2. no filename is given, so it will look up the default in 'packages'. This is set to 'main.js', so it will try to load: 'ng2/main.js'

In this demo there is no ng2/main.js, so it will give a 404 error ;)

Another thing you might notice in the 'package'-hash, is that most main-files are appended with '.umd.js'. Umd stands for 'Unversal Module Definition', these are javascript files containing complete modules. The @angular/common module exists of multiple files and common.umd.js is a compiled version. If you use common.js, the files in this module will be loaded seperately.

App.ts

Angular 2 is a component based framework. This means that html snippets are seen as ‘components’, for example on a search result page, the list can be a component, but also the items in the list can be (sub)components.

Below the hello world component, app.ts,

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component, enableProdMode } from "@angular/core";


@Component({
selector: 'hello-world',
template: `
<div>
Hellow {{ test }}
<input [(ngModel)]="test" />
<button (click)="hoppa()">Click me</button>
</div>
`
})
class HelloWorld {
test: string = 'world';

hoppa(ss) {
alert(this.test);
}
}

bootstrap(HelloWorld);


The code may look weird for javascript, but remember, this is TypeScript. For more information about TypeScript, see the TypeScript tutorial.

After you've created the app.ts, this file can be compiled into app.js, using 'tsc'. In the node_modules/.bin/ folder is a script called 'tsc'. You can execute this by typing,

$ ./node_modules/.bin/tsc

Or use npm,

$ npm run tsc


You will probably see a couple of warnings and errors, because Angular 2 is not yet final and using syntax which is experimental in TypeScript. The most important thing is that app.js is generated.

This is it, now you can browse to the index.html and see the hello world example!


 

End note

This Hello World will hopefully help you jump start learning Angular 2. While it's far from complete explaining every bit in detail, the purpose is to give a little example and help setting up a development environment.

To learn more about Angular 2, the following tutorials are a good place to continue reading,



Gerelateerd

07-07-2016 WMI scripting example
27-06-2016 Java JNI and Windows messages
- Bent u opzoek naar een Php of Java programmeur voor uw website of applicatie? (freelance / detachering)
- Heeft u alleen enkele tickets, of gehele projecten in de planning?

Kijk hier voor meer informatie of neem contact op.
Sitemap | Op onze producten & diensten zijn onze algemene voorwaarden van toepassing