angular2使用簡單介紹

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

先跑一個DEMO

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

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

?

1 2 3 4 5 6

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

總結來講就是一個 index.html 文件和兩個在 app 文件下的 Typescript 文件， 咱們能夠hold住！

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

1. 配置咱們的開發環境
2. 編寫 Angular 初始化組件
3. 引導它控制咱們主要的 index.html 頁面
4. 編寫index.html 頁面

開發環境搭建

創建文件夾

?

1 2	mkdir angular2-app cd  angular2-app

配置TYPESCRIPT

須要經過一些特殊的設置來指導Typesript進行編譯。
新建一個 tsconfig.json 文件，放於項目根目錄下，並輸入一下配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

{   "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的環境變量以及語法， Typescript編譯器並不能原生的支持這些。 因此咱們使用 Typescript 類型定義文件 – d.ts 文件 （即 typings.json） 來解決這些兼容性問題。

建立 typings.json 文件，放於項目根目錄下

?

1 2 3 4 5

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

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

添加咱們須要的庫

咱們推薦使用npm來管理咱們的依賴庫。
在項目根目錄下建立package.json文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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

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

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

?

1	npm install

這樣咱們就完成了咱們的開發環境的搭建。

第一個ANGULAR 組件

組件是Angular中最基本的一個概念。 一個組件包含一個視圖 – 咱們用來展現信息或者完成用戶交互的頁面。 技術上來說， 一個組件就是一個控制模板試圖的類， 在開發應用中會寫不少組件。 這是咱們第一次嘗試寫一個組件，因此咱們保證他儘量的簡單。

建立一個應用源碼的子目錄

咱們習慣上將咱們的程序放在項目根目錄下的 app 子目錄下，因此首先建立一個 app 文件夾

?

1 2	mkdir app cd  app

建立組件文件

在 app 文件夾下建立一個 app.component.ts 文件，而後輸入如下內容

?

1 2 3 4 5 6 7

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

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

組件類

在這個文件地步，咱們建立了一個啥都不作的空組件類 AppComponent。 當咱們真正開發應用的時候， 咱們能夠擴展這個類，好比添加一些屬性和方法邏輯。 這個 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 纔可使用。

?

1	import {Component} from 'angular2/core' ;

在Typescript中，咱們在類上面添加註解， 註解的方式很簡單，使用 @ 做爲前綴進行註解。

?

1 2 3 4

@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 文件夾下建立 main.ts

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

bootstrap(AppComponent);
咱們須要作兩個東西來啓動這個應用

Angular自帶的 bootstrap 方法

咱們剛剛寫好的啓動組件

把這個兩個通通 import進來，而後將組件傳遞給 bootstrap 方法。

附錄中會詳細講解 爲何咱們從 angular2/platform/browser中引入bootstrap 方法，還有爲何會建立一個main.ts文件

如今萬事俱備，只差東風啦！

添加 INDEX.HTML 文件

首先回到項目的根目錄，在根目錄中建立index.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

< 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 渲染進去。

編譯而後運行

只須要在終端中輸入

?

1

npm start

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

最終的結構

?

1 2 3 4 5 6 7 8 9 10

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