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 加载到浏览器中