Angular2 入门

1. 说明

该文档为Angular2的入门文档，可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序，通过该文档可以初步了解Angular2的相关知识以及开发流程，同时搭建一套可用的开发环境。

环境：

node v6.2.2

typescript v1.8.2

angular2 rc4

visual studio code

2. 环境安装

如果机器上还木有node环境，请安装最新的node环境。

3. 创建并配置

3.1 创建项目目录

创建一个文件夹 名称为 ng2-helloworld

3.2 添加包定义与配置文件

往项目目录下添加下列包定义与配置文件：

1. package.json 列出hellworld 程序的依赖，并定义了一些有用的脚本。

{

"name":
"ng2-helloworld",

"version": "1.0.0",

"description": "hello
world",

"scripts": {

"start": "tsc &&
concurrently \"npm run tsc:w\" \"npm run lite\" ",

"lite":
"lite-server",

"tsc": "tsc",

"tsc:w": "tsc -w"

},

"license": "ISC",

"dependencies": {

"@angular/common":
"2.0.0-rc.4",

"@angular/compiler":
"2.0.0-rc.4",

"@angular/core":
"2.0.0-rc.4",

"@angular/forms":
"0.2.0",

"@angular/http":
"2.0.0-rc.4",

"@angular/platform-browser":
"2.0.0-rc.4",

"@angular/platform-browser-dynamic": "2.0.0-rc.4",

"@angular/router":
"3.0.0-beta.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",

"bootstrap": "^3.3.6"

},

"devDependencies": {

"concurrently":
"^2.0.0",

"lite-server":
"^2.2.0",

"typescript":
"^1.8.10"

}

}

1. tsconfig.json 是 TypeScript 的编译器配置文件。

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution":
"node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": false

}

}

1. systemjs.config.js 是 SystemJS 的配置文件，本程序采用SystemJS作为模块加载器。

/**

* System configuration for Angular 2 samples

* Adjust as necessary for your application
needs.

*/

(function (global) {

// map tells the System loader where to
look for things

var map = {

'app': 'app', // 'dist',

'@angular': 'node_modules/@angular',

'rxjs': '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' }

};

var ngPackageNames = [

'common',

'compiler',

'core',

'forms',

'http',

'platform-browser',

'platform-browser-dynamic',

'router'

];

// Individual files (~300 requests):

function packIndex(pkgName) {

packages['@angular/' + pkgName] = { main:
'index.js', defaultExtension: 'js' };

}

// Bundled (~40 requests):

function packUmd(pkgName) {

packages['@angular/' + pkgName] = { main:
'/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

}

// Most environments should use UMD; some
(Karma) need the individual index files

var setPackageConfig =
System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages

ngPackageNames.forEach(setPackageConfig);

var config = {

map: map,

packages: packages

};

System.config(config);

})(this);

3.3 安装依赖包

npm install 来安装对应的依赖包

安装完成以后就可以开始写代码了

4. 创建应用文件

在ng2-helloworld 创建一个文件夹 app，在app文件夹下创建文件app.ts如下所示：

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

@Component({

selector: 'app',

template:'<h1>hello
world</h1>'

})

export class
AppComponent {

}

AppComponent
是应用的根组件，每个
Angular 应用都至少有一个根组件 ，它是放用户界面的容器。 组件是 Angular 应用程序中最基本的模块，组件通过它所关联的模板，控制视图。

一个组件包括三个基本部分：

l 一个或多个 import 语句来引入所需的文件。

l 一个 @Component 装饰器 来告诉 Angular ，使用哪个模板，以及怎样创建这个组件。

l 一个 组件类 来通过它的模板控制一个视图的外观和行为。

(1). 导入

Angular 应用都是模块化的，它们由很多职责明确的文件组成。 Angular 本身也是模块化的。它包括一系列的库模块，这些模块包括了一系列相关的特性，以便拿来构建应用程序。

当需要一个模块中的某些东西时，引入 (import) 它。 在这里，我们导入了 Angular 2 核心库，以便组件代码访问 @Component 装饰器。

(2). @Component

Component
是一个 装饰器函数
，它接受一个 元数据对象 作为参数。 通过给这个函数加上 @ 前缀，并使用
metadata 对象调用它，能够把 元数据 关联到组件类上。这些元数据会告诉 Angular 如何创建和使用组件类。

这里的这个元数据对象有两个字段：一个 selector ，一个 template 。

selector：指定了一个简单的 CSS 选择器，用于指出放置此组件的 HTML 元素。在此

template：指定了此组件的模板。 它用一种增强的 HTML 形式写成，用来告诉
Angular 如何渲染此组件的视图。模板中只有一行 HTML ：“ My First
Angular App ”。模板还可以包含更加复杂的语法，准确来说，一个Angular应用就是一个组件树。

(3). Component
类

文件的最底下，是一个空的，什么也不做的类，叫做 AppComponent 。

打算构建一个真实的应用时，通过添加属性和应用逻辑来扩展这个类。导出 AppComponent，以便在应用的其它地方 导入。

5. 创建启动文件

在app 文件夹创建一个文件 main.ts
，用来启动Angular程序

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

import { AppComponent
} from './app’;

bootstrap(AppComponent)

.then(success =>
console.log(`Bootstrap success`))

.catch(error => console.log(error));

我们引入了两样东西来启动本应用：

1. Angular 的浏览器 bootstrap(引导) 函数
2. 应用的根组件： AppComponent 。

然后，调用 bootstrap 函数，并且把 AppComponent 传进去。启动函数与应用程序是两个相互分离的关注点。

6. 创建宿主页面

在ng2-helloworld 创建一个文件 index.html 作为Angular程序的宿主页面。

<html>

<head>

<title>hello world</title>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1">

<!-- 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>

<app>Loading...</app>

</body>

</html>

这段儿 HTML 值得注意的有：

l 引入JavaScript 库，首先引入 es6-shim ，它会给全局对象 window 打上补丁，使其支持 ES2015(ES6) 的必备特性。然后是 Angular 中使用的zone.js 和 reflect-metadata ，最后是用于模块加载的 SystemJS 库。

l 配置 SystemJS ，以便引入和运行刚才写的 main 文件。

l <body> 中的 <app> 标签是引入根应用程序组件。

7. 构建并运行

打开终端窗口，并输入如下命令：

npm
start

这个命令运行两个并行的 node 进程

TypeScript
编译器，运行在监视
(watch) 模式

一个名叫 lite-server 的静态服务器，它把 index.html 加载到浏览器中