I NT V ANGULAR 2

I.

Gii thiu:
1. Angular l g:
- Angular 2 l mt javascript framework ph bin hin nay c dng
xy dng web application.
- Phin bn beta ca Angular 2 c pht hnh vo thng 3 nm 2014.
2. c im ni bt:
- Pht trin cc ng dng di ng: Cc th vin modul v nh tuyn
trong angular c np u tin gip ng dng ca bn c np y
cc th vin cn thit, k c khi s dng cc mng c bng thng
thp cng khng cn phi ch i lu. Cc tnh nng u tin trn di
ng bao gm h tr cm ng, iu chnh hiu sut v cch s dng
ti thiu b nh trn nn tng di ng, v cc thnh phn thit k giao
din ngi dng thch nghi vi nhiu thit b.
- Future ready: Angular phin bn 2.0 c vit trong nn tng ES6
(ECMAScript 6), vi vic b sung thm cc kiu v ch thch. ES6
cho php Angular c hng li t cc sn phm tt nht ca
JavaScript gip m vit ra d c v r rng hn.
- Pht trin linh hot hn: S la chn ngn ng no l ty thuc vo
bn. Ngoi vic cung cp h tr y tnh nng ca ES6 v
TypeScript, Angular 2.0 vn hot ng tt ngay c trn cc nn tng
ES5, Dart, CoffeScript, v cc ngn ng khc bin dch JavaScript.
Nh vy ng qu lo lng v mi trng pht trin Angular 2.0.
- Tc v hiu nng: Tc c ci thin nhanh hn gp 5 ln,
nh tnh nng tuning Ca JavaScript. Nu bn mun m bo tc
cho ng dng hin ti ca bn th Angular phin bn 2.0 s l la chn
tt nht.
- n gin d vit: Ngn ng ph hp vi ng ngha, c php vit d
dng. Gim phc tp cho nhm ca bn: cu trc mi n gin, d
hc, nhiu template mu.
- n gin vic tuyn tnh: n gin trong vic nh tuyn cc URL.
Angular 2.0 h tr nav, animated hiu ng, v lazy loading cho trnh
duyt di ng. Nu bn ang s dng route phin bn trc, bn
cng c th d dng chuyn i sang angular 2.0.
- Injection: Angular 2.0 to lin ht mnh m, n gin s dng
khai bo injection. Khai bo injection gip bn vit kim th d dng
hn.

II.

- H tr cc thnh phn web: cung cp thm cc thnh phn web,

c xy dng bng cch s dng cc th vic khc, cho php bn
truyn d liu qua li d dng. Cc thnh phn Angular s dng cc
tiu chun web HTML 5 trong trnh duyt h tr.
Ci t mi trng v chy ng dng u tin:
- Angular 2 s dng TypeScript, l ngn ng chnh pht trin Angular.
- B1: To folder cha project:
- B2: To file tsconfig.json l file cha cc ci t bin dch TypeScript,
v sinh ra cc file JavaScript.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

- B3: To file typing.json cung cp cc file nh ngha b sung cho th

vin
1.
2.
3.
4.
5.
6.
7.

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}

B4: To file package.json l file chc cc pakage cn dng. Cc pakage

ny c chy trn nn npm (Node Package Manager). {

1. {
2. "name": "angular2-quickstart",
3. "version": "1.0.0",
4. "scripts": {
5.
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
6.
"lite": "lite-server",
7.
"postinstall": "typings install",
8.
"tsc": "tsc",
9.
"tsc:w": "tsc -w",
10.
"typings": "typings"
11. },
12. "license": "ISC",
13. "dependencies": {
14.
"@angular/common": "2.0.0",
15.
"@angular/compiler": "2.0.0",
16.
"@angular/core": "2.0.0",
17.
"@angular/forms": "2.0.0",
18.
"@angular/http": "2.0.0",
19.
"@angular/platform-browser": "2.0.0",
20.
"@angular/platform-browser-dynamic": "2.0.0",
21.
"@angular/router": "3.0.0",
22.
"@angular/upgrade": "2.0.0",
23.
"core-js": "^2.4.1",
24.
"reflect-metadata": "^0.1.3",
25.
"rxjs": "5.0.0-beta.12",
26.
"systemjs": "0.19.27",
27.
"zone.js": "^0.6.23",
28.
"angular2-in-memory-web-api": "0.0.20",
29.
"bootstrap": "^3.3.6"
30. },
31. "devDependencies": {
32.
"concurrently": "^2.2.0",
33.
"lite-server": "^2.2.2",
34.
"typescript": "^2.0.2",
35.
"typings":"^1.3.2"
36. }
37. }

- B5: to file systemjsconfig.js cung cp thng tin cho modun loader v v

tr cc application module, v thng tin cc pakage cn thit.
1. /**
2. * System configuration for Angular 2 samples
3. * Adjust as necessary for your application needs.
4. */
5. (function (global) {
6. System.config({
7. paths: {
8. // paths serve as alias
9. 'npm:': 'node_modules/'
10.},
11.// map tells the System loader where to look for things
12.map: {
13.// our app is within the app folder
14.app: 'app',
15.
16.// angular bundles
17.'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
18.'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
19.'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
20.'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
21.'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platformbrowser-dynamic.umd.js',

22.'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
23.'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
24.'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
25.
26.// other libraries
27.'rxjs': 'npm:rxjs',
28.'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
29.},
30.// packages tells the System loader how to load when no filename and/or no extension
31.packages: {
32.app: {
33.main: './main.js',
34.defaultExtension: 'js'
35.},
36.rxjs: {
37.defaultExtension: 'js'
38.},
39.'angular2-in-memory-web-api': {
40.main: './index.js',
41.defaultExtension: 'js'
42.}
43.}
44.});
45.})(this);

- B6: ci t nodeJS v6.x.x ti https://nodejs.org/en/

trong commandline g npm install
Lu : cmd phi c chuyn n folder project
- B7: To mt folder con trong project ca bn vi tn app. y l ni
cha app components ca Angular.
- B8: To file app/app.module.ts
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

- B9: To file app/app.component.ts l thnh phn iu khin ca Angula

1.
2.
3.
4.
5.
6.
7.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

- B10: To file main.ts l nn tng ng dng chy

1.
2.
3.
4.
5.
6.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

- B11: To file index.html cha ni dung

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

- B12: to file style.css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}

- B13: Trong commandline g npm start.

- Kt qu: trn browser v cmd.

III.

Kin trc ca Angular 2:

- Angular framework bao gm nhiu th vin, mt s bt buc

- Angular app c vit bng HTML template kt hp vi Agularized
markup.
- Component c vit qun l cc template trn.
- Server s cha cc logic, lin h tc v ca cc. Sever v component s
c nm trong mt module d qun l v tng tc.
- Khi app c chy bi boostrap t root module. Angular s tip nhn v
hin th ni dung trn browser v tng tc vi ngi dng thng qua cc
cu trc m lp trnh vin nh ngha.