2019獨角獸企業重金招聘Python工程師標準>>>

?

Angular2入門教程-1

?

今天，Angular2終于正式發布了2.0.0的正式版，所以已經可以開始正式使用了。

Angular2介紹

首先，Angular2跟Angular1.x版本沒有多大關系，雖然2沿用了版本1的一些概念，像directive, model, service, router, dependency injection等， 但是很多用法和原理都已經不是那么一回事了。Angular2有如下一些特性：

模塊化

• 在Angular2開發中，所有的系統功能都是模塊化的，你只需要導入需要的部分。用Angular2開發的應用也是模塊化的，一個模塊、一個功能、甚至頁面上的一個標簽都是組件。
• 模塊化帶來的最大的好處就是按需加載，這就大大提高了APP的啟動時的性能，也使得需要下載的代碼比較小，因為不需要的模塊可以不用導入。按照Angular官方的說法，使用Angular2的hello world的實例創建的App，在做完代碼壓縮合并以后,下載的代碼在50K以內。
• 模塊化也給開發帶來方便，使得協作開發、代碼合并等都非常方便。

使用TypeScript

• TypeScript是Javascript的超集，TypeScript的代碼會被編譯成Javascript的代碼再執行。所以，如果有任何的語法或其他錯誤，就可以在編譯的時候及時發現。而這個編譯的過程可以通過工具自動執行，這樣就可以在你寫完某一段代碼的時候就發現其中的錯誤。
• TypeScript的靜態類型的，所以，我們就可以通過一些工具來實現像JAVA這樣的強類型語言才會有自動補全、重構、代碼查找等功能。雖然說像Webstorm這樣的工具對于javascript也能提供自動代碼補全之類的功能，但是他是通過檢索代碼里面的所有關鍵字，然后匹配關鍵字去補全，而不是通過語言自身的特性。
• TypeScript具有面向對象語言的一些特性，如抽象和繼承、命名空間、包等。以抽象和繼承為例，雖然用js也可以實現類和類的繼承關系，但是使用TypeScript我們可以直接使用interface,?implements這樣的語法來實現，這使得代碼結構更清晰、更易讀。

更容易

• 好吧，這只是官方的說法，要說容易也要看從什么方面來說。如果學過Angular1，你們可能知道，1非常容易上手，有一點js基礎的人，幾天就能學會并開始開發。如果再有一點MVC的背景或知識，就更容易了。但是2就不一樣，一開始學習成本比較高，首先是因為TypeScript的語法，模塊化的開發，對于沒有多少開發經驗的人來說，理解和上手都有一定困難。但是一旦上手以后，之后的開發和學習就比較容易了。不像Angular1，一開始的學習曲線很平緩，很容易上手，但是真正開始開發一個比較復雜的應用的時候，就會發現有很多問題，需要理解他的背后的原理，像雙向綁定、模板、路由等。這時候的學習曲線就會變得很陡。
• Angular2是一個完整的前端開發框架，利用Angular2提供的功能和模塊，你可以開發一個完整的應用。但是如果你用React，你還需要整合很多其他的庫來實現某些方面的功能，這樣就會面臨很多選擇，Redux, Flux, React-router, axios…
• 前面提到Angular2使用TypeScript，這也給開發帶來很多便利，使得代碼更易讀、容易維護。

Angular2開發

在這篇文章里，我們通過一個完整的實例（一個Todolist的App），來了解一個Angular2的應用的開發的大致的方法或過程。這會分成2部分，第一部分先介紹我們使用的Angular2項目的模板，通過這個模板介紹Angular2項目的基本框架和配置。在第二部分里，再具體的開發具體的業務模塊。

獲取項目模板

我創建了一個Angular2的項目模板，這是根據官方提供的教程創建，已經配置好項目的基本配置和typescript，還提供了live-reload的功能，也就是當某一個文件修改的時候，就會刷新頁面，如果修改的文件是typescript的.ts文件，就會先編譯再刷新頁面。使用git將項目clone到你的指定目錄中就可以開始使用了：

? 1	? git clone --depth 1 https://github.com/Mavlarn/angular2-basic

?

然后進入項目目錄里面，安裝依賴包:

? 1 2

? cd angular2-basic npm install

?

npm install?除了安裝項目的依賴包，最后還會運行typings install，如果你運行完npm install發現’typings’目錄沒有創建，就需要運行這個命令去手動安裝:

? 1	? npm run typings -- install

?

然后就可以運行了:

? 1	? npm start

?

啟動成功以后，就會自動打開瀏覽器并打開url：http://localhost:3000/?，應該看到下面的頁面:

項目結構和文件

先來看看項目模板里面的文件，以及他們都是做什么的:

? 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

? . ├── app │?? ├── about │?? │?? ├── about.component.html │?? │?? ├── about.component.ts │?? │?? └── about.routes.ts │?? ├── example │?? │?? ├── example.component.html │?? │?? ├── example.component.ts │?? │?? └── example.routes.ts │?? ├── app.component.css │?? ├── app.component.html │?? ├── app.component.ts │?? ├── app.module.ts │?? ├── app.routes.ts │?? └── main.ts ├── build ├── index.html ├── package.json ├── styles.css ├── systemjs.config.js ├── tsconfig.json ├── typings │?? ├── globals │?? └── index.d.ts └── typings.json

?

下面是項目環境相關的文件：

package.json

這是項目的基本定義文件，所有的基于nodejs的項目都會有一個package.json文件，里面會定義項目名稱、版本、依賴的庫，以及腳本。腳本里面定義了幾個可以使用npm運行的腳本，例如：

• “start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “
  用于啟動測試服務器，啟動的過程中執行了編譯、檢測文件修改、啟動服務器等任務。
• “postinstall”: “typings install”
  用于在npm install完成以后執行，下載TypeScript類型定義文件。
• “tsc:w”: “tsc -w”
  編譯TypeScript文件，并且是以’watch’模式啟動，也就是檢測文件修改，如果有TypeScript文件被修改，自動執行編譯過程。

typings.json

TypeScript類型定義文件，定義了項目用到的TypeScript類，用于編譯、代碼補全等。

typings文件夾

運行typings install以后，TypeScript會根據typings.json文件里面的定義，下載需要的類型定義文件，下載的TypeScript類文件會保存在這里。

tsconfig.json

TypeScript的配置文件，在編譯TypeScript文件的時候，會根據這個配置進行編譯。

systemjs.config.js

SystemJS的配置文件。Angular2使用SystemJS來實現動態加載，它設置每個模塊所在的位置，例如，我們的app，是從build目錄中加載，加載的文件是main.js。還有，angular模塊，也就是@angular，是從node_modules/@angular里加載。如果我們的App以后要使用其他第三方的庫，就需要在這里添加，才能夠成功加載。

下面，我們再來看看App相關的文件。

index.html

App的index文件，里面已經添加了需要的js、css文件，然后通過SystemJS加載app。該文件里面的：

? 1	? <root-app>Loading...</root-app>

?

定義了加載App的html組件’root-app’。

styles.css

全局的樣式定義。注意每個組件使用的樣式不是在這里面。

app/main.ts

Angular2的App初始化文件。每一個Angular2的App都是通過這個文件被加載的。

? 1 2 3 4

? import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

?

它首先從@angular/platform-browser-dynamic里引入了platformBrowserDynamic，從他的名字可以看出，它根據當前的運行環境，如操作系統、瀏覽器，來初始化一個運行環境，然后從這個環境里面運行AppModule。

app/app.module.ts

這個文件定義了我們的App，它是一個Angular模塊。

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

? import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { AboutComponent } from './about/about.component'; import { ExampleComponent } from './example/example.component'; import { routes } from './app.routes'; @NgModule({ imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], declarations: [AppComponent, AboutComponent, ExampleComponent], bootstrap: [AppComponent] }) export class AppModule {}

?

首先它引入了幾個Angular2的模塊，我們需要使用RouterModule里面定義的路由，如果有表單，需要引入FormsModule。
接下來的幾個，就是引入了這個模板項目里面提供的幾個組件，其中AppComponent是App的主加載模塊,?AboutComponent和ExampleComponent組件是兩個提供的實例。routes是定義的路由。

接下來再看App模塊的定義:

? 1 2 3 4 5 6

? @NgModule({ imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], declarations: [AppComponent, AboutComponent, ExampleComponent], bootstrap: [AppComponent] }) export class AppModule {}

?

它使用NgModule標簽定義了一個模塊，我們需要導入的模塊和路由、定義的組件，啟動app使用的組件，都在這里面定義。

• app/app.routes.ts
  這個是app的路由定義。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14

  ? import { Routes } from '@angular/router'; import { AboutRoutes } from './about/about.routes'; import { ExampleRoutes } from './example/example.routes'; export const routes: Routes = [ { path: '', redirectTo: '/example', pathMatch: 'full' }, ...AboutRoutes, ...ExampleRoutes ];

他首先從@angular/router里面引入Routes類，并根據這個定義app的路由。在這個路由里面，我們定義了一個默認路由，當你的path為空時重定向到’example’：

? 1	? { path: '', redirectTo: '/example', pathMatch: 'full'}

?

也就是當打開urlhttp://localhost:3000的時候，自動重定向到’example’，也就是http://localhost:3000/example。

同時，它還從兩個實例的組件about和example里面引入他的路由定義文件，并把它們合并到app的路由定義數組里面。

注意這里的...語法，這是列表的合并的語法，意思是，我在定義一個Routes的數組的同時，把AboutRoutes這個數組也合并到當前的數組里面。

app/app.component.*

在上面的AppModule的定義里，我們定義了我們的app，并且定義了AppComponent是加載模塊。下面就來看看這個組件是怎么定義的。這里有3個文件，分別為’ts’, ‘css’和’html’，這也是一般一個簡單的組件包含的3個部分。其中app.component.ts是組件定義的類:

? 1 2 3 4 5 6 7 8

? import { Component } from '@angular/core'; @Component({ selector: 'root-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent {}

?

這里，我們使用一個Component標簽來定義一個組件，里面有3個屬性：

• selector，就是這個組件在它的上一級html頁面里面要填充進那個element里。由于這個是我們的APP的主模塊，它的上一級html頁面也就是index.html。在上面的index頁面中，提到<root-app>Loading...</root-app>，這個’root-app’就是’selector’里面的這個值。當這個AppComponent加載成功以后，這個組件的html內容就會替換index頁面的<root-app>。
• templateUrl
  這個屬性設置了這個組件使用的html模板。對于簡單的頁面的話，也可以使用template來定義一個html的字符串作為模板。下面是這個模板的內容:

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13

  ? <header> <section> <h2>First Angular 2 App</h2> <p>Greate! My first angular 2 app works!</p> </section> <nav> <ul> <li><a routerLink='/about'>About</a></li> <li><a routerLink='/example'>Example</a></li> </ul> </nav> </header> <router-outlet></router-outlet>

上面的頁面其實就是我們的app里面的主頁面，上面header的部分就是app的頭，有2個導航的鏈接，分別鏈接到模板里面提供的2個實例組件(注意鏈接用的是routerLink='/about'的方式，而不是’html’的’href’的方式。)。下面就是router-outlet定義的一個空的element，Angular2會根據路由定義將當前路徑所對應的頁面內容放在這個element下面。

• styleUrls
  顧名思義，這個就是樣式的定義文件的路徑。同樣，我們也可以使用style來在這個文件內定義樣式。我們多次提到Angular2是組件化的，組件之間應該是不會相互影響，首先就是定義的樣式不會相互影響。在這個app.component.css文件中，我們定義了app.component.html需要的樣式：

  ? 1 2 3 4 5 6 7 8

  ? header section { display: inline-block; width: 80%; } header nav { width: 20%; float: right; }

我們不需要擔心在整個app的其他組件里面，也會有其他的html element會被header section這樣的樣式影響，這個樣式只會在這個組件內有效。

app/example/?和 app/about/

這是一個實例組件，里面有ts, html, css。這幾個文件的功能和說明跟上面’app.component’里的定義類似。有一點區別的就是example.routes.ts文件：

? 1 2 3 4 5 6 7 8 9

? import { Route } from '@angular/router'; import { ExampleComponent } from './example.component'; export const ExampleRoutes: Route[] = [ { path: 'example', component: ExampleComponent } ];

?

這個路由定義引入的是Route， 而不是之前的Routes，區別是我們在app模塊的路由定義里面合并每個模塊的路由定義。

到現在為止，我們介紹了一個Angular2的項目所包含的配置和代碼，了解了上面介紹的項目環境以后，就可以再進一步使用gulp或者webpack來創建項目構建的環境。如不同的運行環境下的自動配置，如開發環境、測試環境和生產環境。還有代碼的混淆、壓縮、合并等，都可以通過添加一個任務來完成。

熟悉了上面的代碼以后，我們就可以來實現自己的業務邏輯，也就是添加一些組件，把這些組件加到AppModule里，使用第三方的jsku等。在這個教程的第二部分里，我們會介紹怎么開發新的組件，來完成一個App。

?

?

轉載于:https://my.oschina.net/martin123/blog/776673

總結

以上是生活随笔為你收集整理的Angular2入门教程-1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。