让我们通过本文从 0 开始使用 TypeScript 创建一个 Angular 2 应用。

先看看运行效果？

如果想先看看运行效果，可以点击访问我们在 Plunker 上面准备的示例，应用其实做的事情很简单，打开页面之后，开始加载程序代码，当程序代码加载完成之后，在页面中显示应用组件，该组件包含 My First Angular 2 App 字符。

其文件目录结构如下：

angular2-quickstart
|-app/
|-|-app.component.ts
|-|-main.ts 
|
|-index.html
|-license.md

功能文件包括一个 index.html 文件以及 app/ 目录下面的两个 TypeScript 文件。

当然了，我们开发不仅仅只是想在 Plunker 上面可以运行就可以了的，而是需要做一个真正的应用，包括：

1. 配置我们的开发环境
2. 创建 Angular 应用的根组件
3. 启动它以让其接管整个页面
4. 创建主页面 index.html

开发环境

我们首先需要一个地方存储整个应用的程序文件（应用项目目录），一些 TypeScript 配置以及一些开发与运行时需要的库。

创建新的项目目录

mkdir angular2-quickstart
cd angular2-quickstart

配置 TypeScript

我们必须要对 TypeScript 编译器进行一上结特殊的设置。

在项目目录下面添加一个名为 tsconfig.json 的文件，并复制/粘贴以下代码：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

TypeScript Typings

许多 JavaScript 库对 JavaScript 的功能与语法进行了扩展，而这些扩展很多是 TypeScript 编译器本身不识别的，我们需要通过 TypeScript 类型定义文件 —— d.ts 教会编译器如何编译这些扩展，在项目目录下面新建一个名为 typings.json 的文件，编辑复制并粘贴下面的代码片段：

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

添加项目必要的第三方库

我们推荐使用 npm 包管理工具管理第三方库。在项目目录中添加一个名为 package.json 的文件，复制并粘贴下面的代码片段：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings" : "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "systemjs": "0.19.20",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

然后在项目目录中执行下面的命令以安装必要的第三方库：

npm install

第一个 Angular 组件

组件(Component) 是 Angular 最基本的概念，组件管理视图——用于显示网页内容或者对用户的反馈作出响应，技术上讲，一个组件就是一个类或者一个视频模板，我们在创建 Angular 应用的过程中，就是创建很多个组件的过程。

创建一个子目录

我们希望整个应用的代码都保存在项目根目录下名为 app/ 的子目录下，在终端中执行下面的命令即可：

mkdir app
cd app

创建组件文件

现在，添加一个名为 app.component.ts 的文件，复制并粘贴以下代码：

import { Component } from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 Angular 2 应用</h1>'
})
export class AppComponent {

}

组件类（Component class）

在该文件的最下方，我们添加了一个空的，不做什么事情的名为 AppComponent 的类，当我们需要去做一个具有实质性功能的应用时，可以去扩展该类，但是在快速入门这个项目中，它不需要做任何事情。

模块

Angular 应用是模块化的，它们会使用很多个不同的模块去实现特定的功能，绝大多数应用的文件都会导出一个事物，比如一个组件，我们的 app.component 文件导出了 AppComponent 类。

export class AppComponent {

}

导出使得这个文件变成了一个模块，而这个文件的名称一般就是模块的名称，如上所述， app.component 就是我们的第一个模块。

表单是任何一个应用的基石，在 Angular 2 中，表单的实现作了不少改变。

曾经在 Angular 1 中，我们使用 ngModel 将表单数据映射至应用的数据模型，但是在 Angular 2，我们可以使用表单控件更加明确地构建表单，虽然看上去，相比于 Angular 1，我们需要写更多的代码，但是却不可以让我们不再需要去解决那些烦人的 ngModel 声明与数据绑定问题了。

一个简单的表单示例

<form [ngFormModel]="loginForm" (submit)="doLogin($event)">
  <input ngControl="email" type="email" placeholder="Email" />
  <input ngControl="password" type="password" placeholder="Password"| />
  <button type="submit">Log in</button>
</form>

与其相应的组件 JS 代码如下：

import {Component, FormBuilder, Validators} from 'angular2/angular2'

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})
export class LoginPage {
  constructor (fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });
  }

  doLogin(event) {
    console.log(this.loginForm.value);
    event.preventDefault();
  }
}

当我们运行该应用时，浏览器中会展示如下的登录表单

    +--------------------+
    | Email              |
    +--------------------+

    +--------------------+
    | Password           |
    +--------------------+

    +--------------------+
    |      Log in        |
    +--------------------+

表单构建器（FormBuilder）

在上面的示例中，我们使用了 FormBuilder，它可以让我们可以快速方便的定义表单控件以及每一个控件需要绑定的验证器，在上面示例中，我们创建了两个文本输入框 email 与 password ：

this.loginForm = fb.group({
  email: ["", Validators.required],
  password: ["", Validators.required]
})

控件组（ControlGroup）

FormBuilder 创建的就是 ControlGroup 实例，我们称之为 form，除了使用 FormBuilder 之外，我们还可以直接手工构建 ControlGroup：

this.loginForm = new ControlGroup({
  email: new Control("email", Validators.required),
  password: new Control("password", Validators.required)
});

但是在实际的开发中，使用 FormBuilder 会方便很多。

表单指令 (For,m Directives)

上面的示例中，你应该已经注意到了，没有使用一个 ngModel 声明，但是我们使用 ngControl 将表单中的值映射至控件对象中。

<input ngControl="email" type="email" placeholder="Email" />

这将 email 输入框 ”绑定“ 至了 email 控件。

自定义验证器

我们可以创建自定义的验证器，它就是一个简单的函数：

function containsMagicWord(c: Control) {
  if(c.value.indexOf('magic' >= 0) {
    return {
      noMagic: true
    }
  }
  
  // Null 表示验证通过
  return null;
}

this.loginForm = fb.group({
  email: ["", containsMagicWord],
  password: ["", Validators.required],
});

处理表单数据

我们可以通过很方便的访问表单对应的 JavaScript 对象，或者某一个控件的值：

doLogin(event) {
  // 展示表单的数据
  var formData = this.loginForm.value;
 
  // 或者获取控件的值
  var email = this.loginForm.controls.email.value;

  event.preventDefault();
}

在 Angular 2 中，使用括号 () 绑定事件，并触发组件类中相应的方法，比如：

@component(...)
class MyComponent {
  clicked(event) {

  }
}

模板如下：

<button (click)="clicked()">点击我</button>

委托

Angular 2 采用普通 DOM 事件一样的机制处理事件，它们同样可以冒泡，我们不需要做什么特别的工作。

事件对象

要访问事件对象，只需要将 $event 作为事件出发的​参数即可。

@Component(...)
class MyComponent {
  clicked(event) {
    console.log(event(
  }
}

模板如下：

<button (click)="clicked($event)">点击我</button>

Angular 2 应用的生命周期需要经过一个多级的启动过程，我们可以在 App 启动、运行与创建/销毁组件的过程中响应大家的事件。

启动

Angular 2 应用需要通过应用的 根组件 (root component) 启动，在我们的主 JS 文件中，我们可以像下面这样写：

import {Component, bootstrap} from 'angular2/angular2'

// 注解部分
@Component({
  selector: 'my-app',
  template: '<h1>你好，{{ name }}</h1>'
})
// 组件控制器
class MyApp {
  constructor() {
    this.name = '潘韬'
  }
}

bootstrap(MyApp)

该代码片段中，你可以添加应用级别的代码与配置等，它的模板将是其它所有组件的容器。

组件初始化

当一个组件创建成功之后，它的构建函数 (constructor) 将被调用，在该函数中，你可以执行组件状态的初始化工作，但是如果应用依赖子组件的属性与数据的话，那么需要先等待子组件先完成初始化。要实现这样的功能，只需要使用生命周期事件 ngOnInit 即可，我们可以在 constructor 中使用 setTimeout 来模拟出相似的效果。

import {Component, bootstrap} from 'angular2/angular2'

@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>'
})
class StreetMap {
  constructor() {
    this.name = '潘韬'
  }

  setMapWindow(mapWindow) {
    this.mapWindow = mapWindow;
  }

  setMapControls(mapControls) {
    this.mapControls = mapControls;
  }

  ngOnInit() {
    // Properties are resolved and things like
    // this.mapWindow and this.mapControls
    // had a chance to resolve from the
    // two child components <map-window> and <map-controls>
  }
}

组件的生命周期

就像 ngOnInit 一样，我们可以在一个组件的生命周期中跟踪多个事件，下面列举出了部分常见的事件，查看完整的 Angular 2 生命周期事件钩子，可以查看官方文档。

import {Component} from 'angular2/angular2'

@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>'
})
class StreetMap {
  constructor() {
    this.name = '潘韬';
  }

  ngOnInit() {

  }

  ngOnDestroy() {

  }

  ngOnCheck() {

  }

  ngOnChanges(changes) {

  }

  ngAfterContentInit() {

  }

  ngAfterContentChecked() {

  }

  ngAfterViewInit() {

  }

  ngAfterViewChecked() {

  }
}

在 Angular 2 中，组件（Component）是创建页面元素与实现业务逻辑的主要方式，与之相对应的，在 Angular 1 中，我们通过 directive、controllers 与 scope 等技术去实现，但是在 Angular 2 中，所有前面的这些实现都被 组件 取代。

一个最简单的 Angular 2 组件示例

下面的这个组件将展示出我的姓名，然后带有一个按钮，当按钮被点击时，将在浏览器的 console 中打印出我的名字。

import {Component} from 'angular2/angular2'

@Component({
  selector: 'my-component',
  template: '<div>大家好，我的名字叫 {{ name }}，<button (click)="sayMyName()">叫一声我的名字</button>'
})
export class MyComponent({
  constructor() {
    this.name = '潘韬'
  }

  sayMyName() {
    console.log('我的名字叫', this.name)
  }
})

当我们在 HTML 模板中使用 `' 标签时，该组件将被创建。

Ionic V2 与 Ionic V1 一样提供了 CLI 工具与 GUI 的工具。

安装 Ionic V2

安装 Ionic 2，可以使用下面的命令：

npm install -g ionic@beta

完全不需要担心 Ionic V1 版本的项目，Ionic@Beta 可以完全兼容 Ionic V1 的项目。

安装完成之后可以使用下面的命令创建新项目：

ionic start cutePuppyPics --v2

运行新创建的项目， cd 进入项目目录之后，运行 ionic serve 命令即可：

cd cutePuppyPics
ionic serve

执行之后，即可像 Ionic v1 一样在浏览器中查看项目了。

构建

要构建 Ionic 项目，需要先安装 cordova ：

sudo npm install -g cordova

为 iOS 构建

ionic platform add ios

你需要先安装 XCode，XCode 允许你直接为 iOS 系统的目标设备构建应用。添加了 iOS 系统之后，即可使用下面的命令运行模拟器：

ionic emulate ios

为 Android 构建

ionic platform add android

接下来你还需要安装 Android SDK ，Android SDK 允许你为 Android 目录设备构建应用，虽然 Android SDK 本身就带了一个模拟器，但是更加推荐你使用 Genymotion：

ionic run android

迁移

Ionic 1.x 是基于 Angular 1.x 技术的，同样的 Ionic 2.x 基于 Angular 2.x，所以，虽然 Ionic 本身的理念没有太多改变，但是代码的写法也因为 Angular 的改变而变得很不一样，Angular 2.x 使用了完全不一样的语法与代码结构（要了解 Angular 2.x 的变化，可以查看 学习 Angular 2 这个网站。

下面这个是 Ionic 1.x 中的写法：

.config(function($stateProvider) {
  $stateProvider
  .state('main', {
    url: '/',
    templateUrl: 'templates/main.html',
    controller: 'MainController'
  })
})

.controller('MainController', function() {

})

现在在 Ionic 2.x 中可以像下面这样写：

@Page({
  templateUrl: 'main/main.html'
})

export class MainCmp {
  constructor() {

  }
}

从 Angular 1.x 迁移

ControllerAs 语法是一个 Angular 1.x 提供的功能，它可以我们不需要使用 $scope 变量即可做到数据绑定，而是将数据直接绑定至 Controller 上，在 Angular 2.x 中，ControllerAs 的实现更加简单了，对比下面是 Angular 1.x 实现：

index.html

<ion-content ng-controller="MainController">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function($scope) {
  $scope.data = {
    text: 'hello world'
  }
})

将上面的示例改成 ControllerAs 语法只需要改变很小的一点代码：

index.html

<ion-content ng-controller="MainController as main">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

TypeScript

TypeScript 是一个提供了 ES6 类 与类型注释的 JavaScript 超集 ，这使得我们可以在 Ionic 项目中按照 ES6 的标准来写。

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

app.ts

export class MainController {
  constructor() {
    this.data = {
      text: 'Hello World'
    }
  }
}

项目结构

在 Angular 1.x 中，最好的项目实践是将所有的 JavaScript 脚本都放在一起，模板文件也放在一起，但是他们两者却是分开的，比如下面这样：

|-www/
|
|--js/
|--|-app.js
|--|-HomeController.js
|--|-DetailController.js
|
|--templates/
|--|-Home.html
|--|-Detail.html
|
|-index.html

但是在 Angular 2.x 中，推荐像下面这样的：

|-www/
|
|--Home/
|--|-HomeController.js
|--|-Home.html
|
|--Detail/
|--|-DetailController.js
|--|-Detail.html
|
|-index.html
|-app.js