angular2 QuickStart

我们快速开始的目标使用TypeScrip构建和运行一个超简单的Angular 2应用，并且部署一个剩余文档中的例子的开发环境，同时它也是一个真正应用的基础。

创建这个应用

• 先决条件：安装Node.js
• 第一步：创建app的项目目录，定义依赖包和特殊的项目设置
• 第二步：创建app的angular根组件
• 第三步：添加main.ts，定义Angular的根组件
• 第四步：添加index.html，定义Angular的hosts
• 第五步：构建和运行app
• 对app做一些改变
• warp up

先决条件：Node.js

如果你电脑里没有，安装node.js和npm

---

通过运行node -v和npm -v来验证你至少运行node v5.x.x和npm v3.x.x以上的版本，旧版本会产生错误

---

创建和配置项目

在这一步我们：

• （a）创建项目文件夹
• （b）定义包和配置文件
• （c）安装包

（a）创建项目文件

makedir angular2-quickstartcd angular2-quickstart

(b)定义包和配置文件
在项目文件夹下添加下面的包定义和配置文件

• packge.json列出了QuickStart需要的依赖包和一些有用的脚本。
• tsconfig.json时TypeScript的编译配置文件
• typing.json标识了TypeScript的定义文件
• systemjs.config.js systemJS的配置文件

packge.json

{  "name": "angular2-quickstart",  "version": "1.0.0",  "scripts": {    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",    "lite": "lite-server",    "postinstall": "typings install",    "tsc": "tsc",    "tsc:w": "tsc -w",    "typings": "typings"  },  "license": "ISC",  "dependencies": {    "@angular/common":  "2.0.0-rc.3",    "@angular/compiler":  "2.0.0-rc.3",    "@angular/core":  "2.0.0-rc.3",    "@angular/forms": "0.1.1",    "@angular/http":  "2.0.0-rc.3",    "@angular/platform-browser":  "2.0.0-rc.3",    "@angular/platform-browser-dynamic":  "2.0.0-rc.3",    "@angular/router":  "3.0.0-alpha.8",    "@angular/router-deprecated":  "2.0.0-rc.2",    "@angular/upgrade":  "2.0.0-rc.3",    "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.12",    "bootstrap": "^3.3.6"  },  "devDependencies": {    "concurrently": "^2.0.0",    "lite-server": "^2.2.0",    "typescript": "^1.8.10",    "typings":"^1.0.4"  }}

tsconfig.json

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

typing.json

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

systemjs.config.js

/** * 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',    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',    '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' },    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },  };  var ngPackageNames = [    'common',    'compiler',    'core',    'forms',    'http',    'platform-browser',    'platform-browser-dynamic',    'router',    'router-deprecated',    'upgrade',  ];  // 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);

(c)安装包
我们用npm安装packge.json列表中的包，在Windows终端中输入下面的命令。
npm install
npm install 之后typing文件夹不可见，如果是这样的话请手动安装它们。

如果安装过程中出现warning，请无视

用npm安装我们需要的库和包
angular开发者用npm包管理器来安装他们程序需要的库和包。

Helpful scripts
在我们建议的packge.json中我们包含了一些npm脚本来处理一些开发任务命令。

{  "scripts": {    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",    "lite": "lite-server",    "postinstall": "typings install",    "tsc": "tsc",    "tsc:w": "tsc -w",    "typings": "typings"  }}

我们大多以一下方式执行npm脚本：npm run加脚本名字。一些命令（像start）不需要run关键字。
下面是这些脚本解释：

• npm start：同时运行编译器和一个服务，都用“watch mode”
• npm run tsc：运行TypeScript编译器一次
• npm run tsc:w：在watch mode 下运行TypeScript编译器；当TypeScript文件改变时重新编译他们
• npm run lite：runs the lite-server, a light-weight, static file server with excellent support for Angular apps that use routing
• npm run typing：单独运行typing tool
• npm run postinstall：在包成功安装后被npm自动调用，脚本自动安装typing.json中定义的 TypeScript definition files

我们都设置完了，接下来写一些代码

第二步：我们的第一个Angular组件

让我们创建一个程序的文件夹并且写一个超简单的Angular组件
在项目根目录下创建一个app文件夹

mkdir app

创建组件文件app/app.component.ts包含以下代码

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

AppComponent时一个程序的根

每一个Angular程序至少包含一个根组件，通常叫做AppComponent，component时构建Angular应用的基本模块。component通过它关联的template来控制屏幕显示。

QuickStart 只有一个极其简单的component。但它包含我们写过的component中的基本结构。

• 一个或多个import用来导入我们需要的东西
• @Component修饰告诉Angular用什么template和怎么去创建component
• 一个component class通过template控制视图的外观和行为

import

Angular应用是模块化的。它包含同一目的的许多文件。Angular本身也是模块化的。它集合了我们构建应用需要的一些相关的库。

当我们需要模块的一些模块或库时，我们import它。这里我们导入了Angular2 Core 所以我们的应用可以使用@Component修饰。

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

@Component decorator

component 是一个修饰函数包含了一些元数据对象。我们通过在它前面添加@和加入元数据对象来使用它。

@Component是一个修饰可以让我们和component类关联元数据。元数据告诉Angular如何创建和使用这个Component。

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

这个特殊的元数据对象有两个字段，一个selector和一个template.

selector 从HTML元素中指定一个CSS selector
这个component中的元素叫做my-app。在整个HTML中Angular遇到它就会创建一个AppComponent实例。

template指定component的模板，用HTML语言描写告诉Angular如何显示component的视图。

component class

在文件的底部有一个空的、没有做任何事的类叫做AppClass。

当我们创建真正的应用是，我们可以在这个类中编写属性和应用逻辑。我们的AppComponent是空的是因为在QuickStart中我们不需要它做任何事。

我们把它导出是为了能在应用的其它地方将它导入，在我们创建main.ts时会用到。

第三步：添加main.ts

现在我们需要告诉Angular载入根component。创建文件app/main.ts包含以下内容：

import { bootstrap }    from '@angular/platform-browser-dynamic';import { AppComponent } from './app.component';bootstrap(AppComponent);

我们导入开始程序需要的两件事。
1. bootstrap函数
2. 应用的根组件，AppComponent

然后我们用bootstrap启动AppComponent。

第四步：添加index.html

在项目的根目录添加index.html目录，把下面的代码复制进去

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

添加一些样式

在项目根目录创建style.css文件，并将以下代码复制进去

h1 {  color: #369;  font-family: Arial, Helvetica, sans-serif;  font-size: 250%;}body {  margin: 2em;} /*  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css  * for the full set of master styles used by the documentation samples  */

第五步：创建和运行app

打开Windows终端，运行以下命令：
npm start