讓我們從零開始，使用Typescript構建一個超級簡單的 AngularJs 2應用。

先跑一個DEMO

運行這個 DEMO先來感受一下 AngularJS2 的應用。

下面是這個應用的文件結構

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

總結來說就是一個 index.html 文件和兩個在 app 文件下的 Typescript 文件， 我們可以hold?。?/p>

下面我們將一步一步的構建這樣的一個程序：

1. 配置我們的開發(fā)環(huán)境
2. 編寫 Angular 初始化組件
3. 引導它控制我們主要的 index.html 頁面
4. 編寫index.html 頁面

開發(fā)環(huán)境搭建

建立文件夾

mkdir angular2-app
cd  angular2-app

配置TYPESCRIPT

需要通過一些特殊的設置來指導Typesript進行編譯。
新建一個 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"
 ]
}

我們稍后在附錄中會詳細講解這個 tsconfig.json

TYPESCRIPT TYPINGS

有很多Javascript的庫，繼承了一些 Javascript的環(huán)境變量以及語法， Typescript編譯器并不能原生的支持這些。 所以我們使用 Typescript 類型定義文件 – d.ts 文件 （即 typings.json） 來解決這些兼容性問題。

創(chuàng)建 typings.json 文件，放于項目根目錄下

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

同樣的，在附錄中會有更詳細點的解釋

添加我們需要的庫

我們推薦使用npm來管理我們的依賴庫。
在項目根目錄下創(chuàng)建package.json文件

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

在附錄中，會有更詳細的解釋

安裝這些依賴包只需要運行

npm install

這樣我們就完成了我們的開發(fā)環(huán)境的搭建。

第一個ANGULAR 組件

組件是Angular中最基本的一個概念。 一個組件包含一個視圖 – 我們用來展示信息或者完成用戶交互的頁面。 技術上來講， 一個組件就是一個控制模板試圖的類， 在開發(fā)應用中會寫很多組件。 這是我們第一次嘗試寫一個組件，所以我們保證他盡可能的簡單。

創(chuàng)建一個應用源碼的子目錄

我們習慣上將我們的程序放在項目根目錄下的 app 子目錄下，所以首先創(chuàng)建一個 app 文件夾

mkdir app
cd  app

創(chuàng)建組件文件

在 app 文件夾下創(chuàng)建一個 app.component.ts 文件，然后輸入以下內容

import {Component} from 'angular2/core';

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

讓我們來詳細的看一下這個文件， 在文件的最后一行，我們定義了一個 類。

組件類

在這個文件地步，我們創(chuàng)建了一個啥都不做的空組件類 AppComponent。 當我們真正開發(fā)應用的時候， 我們可以擴展這個類，比如添加一些屬性和方法邏輯。 這個 AppComponent 類之所以為空是因為我們在入門程序中他不用做任何事情。

模塊

Angular應用是模塊化的。 他們包含很多完成某項功能的模塊文件。
大多數程序文件會 export出一個東西比如一個組件。 我們的 app.component.ts 文件 exports出了 AppComponent

export class AppComponent { }
exports使一個文件轉變成一個模塊。 文件名（不包含擴展名）通常就是這個模塊的名稱。 所以， app.component 就是我們的第一個模塊的名稱。

一些更復雜的應用會有繼承于 AppComponent 的子組件， 而且會有很多文件和模塊。但是我們的快速入門程序不需要這么多， 一個組件就夠了。

如果一個組件依賴其他的組件， 在Typescript應用中， 當我們需要引入其他模塊的時候，直接import進來就可以使用。 例如：

import {AppComponent} from './app.component'
Angular 同樣是一個模塊， 他是一系列模塊的集合。 所以當我們需要angular的一些功能時，同樣的把Angular引入進來。

組件注解

當我們給一個類加上注解的時候， 一個類就變成了 Angular的組件。 Angular 需要通過注解來搞明白怎么去構建視圖， 還有組件是怎么與應用的其他部分進行整合的。

我們用 Componet 方法來定義一個組件的注解， 這個方法需要引入 angular2/core 才可以使用。

import {Component} from 'angular2/core';

在Typescript中，我們在類上面添加注解， 注解的方式很簡單，使用 @ 作為前綴進行注解。

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

@Component 告訴Angular這個類是一個組件。 里面的參數有兩個, selector 和 template.

selector參數是一個 css 選擇器， 這里表示選擇 html 標簽為 my-app的元素。 Angular 將會在這個元素里面展示AppComponent 組件。

記住這個 my-app 元素，我們會在 index.html 中用到

template控制這個組件的視圖， 告訴Angular怎么去渲染這個視圖。 現在我們需要讓 Angular去加載這個組件

初始化引導

在 app 文件夾下創(chuàng)建 main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);
我們需要做兩個東西來啟動這個應用

Angular自帶的 bootstrap 方法

我們剛剛寫好的啟動組件

把這個兩個統(tǒng)統(tǒng) import進來，然后將組件傳遞給 bootstrap 方法。

附錄中會詳細講解 為什么我們從 angular2/platform/browser中引入bootstrap 方法，還有為什么會創(chuàng)建一個main.ts文件

現在萬事俱備，只差東風啦！

添加 INDEX.HTML 文件

首先回到項目的根目錄，在根目錄中創(chuàng)建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <!-- 2. Configure SystemJS -->
  <script>
   System.config({
    packages: {    
     app: {
      format: 'register',
      defaultExtension: 'js'
     }
    }
   });
   System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

 <!-- 3. Display the application -->
 <body>
  <my-app>Loading...</my-app>
 </body>

</html>

HMTL中三個部分需要說明一下：

加載我們需要的 javascript庫， 附錄中會有詳細的介紹

配置了 System 并讓他import 引入 main 文件

添加 my-app 這個HTML元素，這里才是加載我們Angular實例的地方！

我們需要一些東西來加載應用的模塊，這里我們使用 SystemJs。 這里有很多選擇，SystemJS不一定是最好的選擇，但是這個挺好用。

SystemJs的具體使用不在我們的快速入門教程里，在附錄中會有一個剪短的說明。

當Angular調用main.ts文件中的 bootstrap方法， 它讀取 AppComponent 的注解，找到 my-app 這個HTML元素， 并將template 渲染進去。

編譯然后運行

只需要在終端中輸入

npm start

程序將會將Typescript編譯成 Javascript ，同事啟動一個 lite-server， 加載我們編寫的index.html。 顯示 My First Angular 2 App.

最終的結構

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json

最新評論