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,
- index.html
- ng2/app.ts
- ng2/package.json
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',
- 'app' will be translated to 'ng2'
- 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,
- TypeScript language tutorial - https://www.typescriptlang.org/docs/tutorial.html
- npm packages - https://docs.npmjs.com/
- Official Angular.io tutorial - https://angular.io/docs/ts/latest/
Gerelateerd
| 07-07-2016 | WMI scripting example |
| 27-06-2016 | Java JNI and Windows messages |