讓我們從零開(kāi)始，使用Typescript構(gòu)建一個(gè)超級(jí)簡(jiǎn)單的 AngularJs 2應(yīng)用。

先跑一個(gè)DEMO

運(yùn)行這個(gè) DEMO先來(lái)感受一下 AngularJS2 的應(yīng)用。

下面是這個(gè)應(yīng)用的文件結(jié)構(gòu)

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

總結(jié)來(lái)說(shuō)就是一個(gè) index.html 文件和兩個(gè)在 app 文件下的 Typescript 文件， 我們可以hold??！

下面我們將一步一步的構(gòu)建這樣的一個(gè)程序：

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

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

建立文件夾

mkdir angular2-app
cd  angular2-app

配置TYPESCRIPT

需要通過(guò)一些特殊的設(shè)置來(lái)指導(dǎo)Typesript進(jìn)行編譯。
新建一個(gè) tsconfig.json 文件，放于項(xiàng)目根目錄下，并輸入一下配置

{
 "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"
 ]
}

我們稍后在附錄中會(huì)詳細(xì)講解這個(gè) tsconfig.json

TYPESCRIPT TYPINGS

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

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

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

同樣的，在附錄中會(huì)有更詳細(xì)點(diǎn)的解釋

添加我們需要的庫(kù)

我們推薦使用npm來(lái)管理我們的依賴庫(kù)。
在項(xiàng)目根目錄下創(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"
 }
}

在附錄中，會(huì)有更詳細(xì)的解釋

安裝這些依賴包只需要運(yùn)行

npm install

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

第一個(gè)ANGULAR 組件

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

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

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

mkdir app
cd  app

創(chuàng)建組件文件

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

import {Component} from 'angular2/core';

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

讓我們來(lái)詳細(xì)的看一下這個(gè)文件， 在文件的最后一行，我們定義了一個(gè) 類。

組件類

在這個(gè)文件地步，我們創(chuàng)建了一個(gè)啥都不做的空組件類 AppComponent。 當(dāng)我們真正開(kāi)發(fā)應(yīng)用的時(shí)候， 我們可以擴(kuò)展這個(gè)類，比如添加一些屬性和方法邏輯。 這個(gè) AppComponent 類之所以為空是因?yàn)槲覀冊(cè)谌腴T(mén)程序中他不用做任何事情。

模塊

Angular應(yīng)用是模塊化的。 他們包含很多完成某項(xiàng)功能的模塊文件。
大多數(shù)程序文件會(huì) export出一個(gè)東西比如一個(gè)組件。 我們的 app.component.ts 文件 exports出了 AppComponent

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

一些更復(fù)雜的應(yīng)用會(huì)有繼承于 AppComponent 的子組件， 而且會(huì)有很多文件和模塊。但是我們的快速入門(mén)程序不需要這么多， 一個(gè)組件就夠了。

如果一個(gè)組件依賴其他的組件， 在Typescript應(yīng)用中， 當(dāng)我們需要引入其他模塊的時(shí)候，直接import進(jìn)來(lái)就可以使用。 例如：

import {AppComponent} from './app.component'
Angular 同樣是一個(gè)模塊， 他是一系列模塊的集合。 所以當(dāng)我們需要angular的一些功能時(shí)，同樣的把Angular引入進(jìn)來(lái)。

組件注解

當(dāng)我們給一個(gè)類加上注解的時(shí)候， 一個(gè)類就變成了 Angular的組件。 Angular 需要通過(guò)注解來(lái)搞明白怎么去構(gòu)建視圖， 還有組件是怎么與應(yīng)用的其他部分進(jìn)行整合的。

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

import {Component} from 'angular2/core';

在Typescript中，我們?cè)陬惿厦嫣砑幼⒔猓?注解的方式很簡(jiǎn)單，使用 @ 作為前綴進(jìn)行注解。

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

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

selector參數(shù)是一個(gè) css 選擇器， 這里表示選擇 html 標(biāo)簽為 my-app的元素。 Angular 將會(huì)在這個(gè)元素里面展示AppComponent 組件。

記住這個(gè) my-app 元素，我們會(huì)在 index.html 中用到

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

初始化引導(dǎo)

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

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

bootstrap(AppComponent);
我們需要做兩個(gè)東西來(lái)啟動(dòng)這個(gè)應(yīng)用

Angular自帶的 bootstrap 方法

我們剛剛寫(xiě)好的啟動(dòng)組件

把這個(gè)兩個(gè)統(tǒng)統(tǒng) import進(jìn)來(lái)，然后將組件傳遞給 bootstrap 方法。

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

現(xiàn)在萬(wàn)事俱備，只差東風(fēng)啦！

添加 INDEX.HTML 文件

首先回到項(xiàng)目的根目錄，在根目錄中創(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中三個(gè)部分需要說(shuō)明一下：

加載我們需要的 javascript庫(kù)， 附錄中會(huì)有詳細(xì)的介紹

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

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

我們需要一些東西來(lái)加載應(yīng)用的模塊，這里我們使用 SystemJs。 這里有很多選擇，SystemJS不一定是最好的選擇，但是這個(gè)挺好用。

SystemJs的具體使用不在我們的快速入門(mén)教程里，在附錄中會(huì)有一個(gè)剪短的說(shuō)明。

當(dāng)Angular調(diào)用main.ts文件中的 bootstrap方法， 它讀取 AppComponent 的注解，找到 my-app 這個(gè)HTML元素， 并將template 渲染進(jìn)去。

編譯然后運(yùn)行

只需要在終端中輸入

npm start

程序?qū)?huì)將Typescript編譯成 Javascript ，同事啟動(dòng)一個(gè) lite-server， 加載我們編寫(xiě)的index.html。 顯示 My First Angular 2 App.

最終的結(jié)構(gòu)

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

最新評(píng)論