Angular2入门教程-1
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
?
Angular2入門(mén)教程-1
?
今天，Angular2終于正式發(fā)布了2.0.0的正式版，所以已經(jīng)可以開(kāi)始正式使用了。
Angular2介紹
首先，Angular2跟Angular1.x版本沒(méi)有多大關(guān)系，雖然2沿用了版本1的一些概念，像directive, model, service, router, dependency injection等， 但是很多用法和原理都已經(jīng)不是那么一回事了。Angular2有如下一些特性：
模塊化
- 在Angular2開(kāi)發(fā)中，所有的系統(tǒng)功能都是模塊化的，你只需要導(dǎo)入需要的部分。用Angular2開(kāi)發(fā)的應(yīng)用也是模塊化的，一個(gè)模塊、一個(gè)功能、甚至頁(yè)面上的一個(gè)標(biāo)簽都是組件。
- 模塊化帶來(lái)的最大的好處就是按需加載，這就大大提高了APP的啟動(dòng)時(shí)的性能，也使得需要下載的代碼比較小，因?yàn)椴恍枰哪K可以不用導(dǎo)入。按照Angular官方的說(shuō)法，使用Angular2的hello world的實(shí)例創(chuàng)建的App，在做完代碼壓縮合并以后,下載的代碼在50K以?xún)?nèi)。
- 模塊化也給開(kāi)發(fā)帶來(lái)方便，使得協(xié)作開(kāi)發(fā)、代碼合并等都非常方便。
使用TypeScript
- TypeScript是Javascript的超集，TypeScript的代碼會(huì)被編譯成Javascript的代碼再執(zhí)行。所以，如果有任何的語(yǔ)法或其他錯(cuò)誤，就可以在編譯的時(shí)候及時(shí)發(fā)現(xiàn)。而這個(gè)編譯的過(guò)程可以通過(guò)工具自動(dòng)執(zhí)行，這樣就可以在你寫(xiě)完某一段代碼的時(shí)候就發(fā)現(xiàn)其中的錯(cuò)誤。
- TypeScript的靜態(tài)類(lèi)型的，所以，我們就可以通過(guò)一些工具來(lái)實(shí)現(xiàn)像JAVA這樣的強(qiáng)類(lèi)型語(yǔ)言才會(huì)有自動(dòng)補(bǔ)全、重構(gòu)、代碼查找等功能。雖然說(shuō)像Webstorm這樣的工具對(duì)于javascript也能提供自動(dòng)代碼補(bǔ)全之類(lèi)的功能，但是他是通過(guò)檢索代碼里面的所有關(guān)鍵字，然后匹配關(guān)鍵字去補(bǔ)全，而不是通過(guò)語(yǔ)言自身的特性。
- TypeScript具有面向?qū)ο笳Z(yǔ)言的一些特性，如抽象和繼承、命名空間、包等。以抽象和繼承為例，雖然用js也可以實(shí)現(xiàn)類(lèi)和類(lèi)的繼承關(guān)系，但是使用TypeScript我們可以直接使用interface,?implements這樣的語(yǔ)法來(lái)實(shí)現(xiàn)，這使得代碼結(jié)構(gòu)更清晰、更易讀。
更容易
- 好吧，這只是官方的說(shuō)法，要說(shuō)容易也要看從什么方面來(lái)說(shuō)。如果學(xué)過(guò)Angular1，你們可能知道，1非常容易上手，有一點(diǎn)js基礎(chǔ)的人，幾天就能學(xué)會(huì)并開(kāi)始開(kāi)發(fā)。如果再有一點(diǎn)MVC的背景或知識(shí)，就更容易了。但是2就不一樣，一開(kāi)始學(xué)習(xí)成本比較高，首先是因?yàn)門(mén)ypeScript的語(yǔ)法，模塊化的開(kāi)發(fā)，對(duì)于沒(méi)有多少開(kāi)發(fā)經(jīng)驗(yàn)的人來(lái)說(shuō)，理解和上手都有一定困難。但是一旦上手以后，之后的開(kāi)發(fā)和學(xué)習(xí)就比較容易了。不像Angular1，一開(kāi)始的學(xué)習(xí)曲線很平緩，很容易上手，但是真正開(kāi)始開(kāi)發(fā)一個(gè)比較復(fù)雜的應(yīng)用的時(shí)候，就會(huì)發(fā)現(xiàn)有很多問(wèn)題，需要理解他的背后的原理，像雙向綁定、模板、路由等。這時(shí)候的學(xué)習(xí)曲線就會(huì)變得很陡。
- Angular2是一個(gè)完整的前端開(kāi)發(fā)框架，利用Angular2提供的功能和模塊，你可以開(kāi)發(fā)一個(gè)完整的應(yīng)用。但是如果你用React，你還需要整合很多其他的庫(kù)來(lái)實(shí)現(xiàn)某些方面的功能，這樣就會(huì)面臨很多選擇，Redux, Flux, React-router, axios…
- 前面提到Angular2使用TypeScript，這也給開(kāi)發(fā)帶來(lái)很多便利，使得代碼更易讀、容易維護(hù)。
Angular2開(kāi)發(fā)
在這篇文章里，我們通過(guò)一個(gè)完整的實(shí)例（一個(gè)Todolist的App），來(lái)了解一個(gè)Angular2的應(yīng)用的開(kāi)發(fā)的大致的方法或過(guò)程。這會(huì)分成2部分，第一部分先介紹我們使用的Angular2項(xiàng)目的模板，通過(guò)這個(gè)模板介紹Angular2項(xiàng)目的基本框架和配置。在第二部分里，再具體的開(kāi)發(fā)具體的業(yè)務(wù)模塊。
獲取項(xiàng)目模板
我創(chuàng)建了一個(gè)Angular2的項(xiàng)目模板，這是根據(jù)官方提供的教程創(chuàng)建，已經(jīng)配置好項(xiàng)目的基本配置和typescript，還提供了live-reload的功能，也就是當(dāng)某一個(gè)文件修改的時(shí)候，就會(huì)刷新頁(yè)面，如果修改的文件是typescript的.ts文件，就會(huì)先編譯再刷新頁(yè)面。使用git將項(xiàng)目clone到你的指定目錄中就可以開(kāi)始使用了：
| ? 1 | ? git clone --depth 1 https://github.com/Mavlarn/angular2-basic |
?
然后進(jìn)入項(xiàng)目目錄里面，安裝依賴(lài)包:
| ? 1 2 | ? cd angular2-basic npm install |
?
npm install?除了安裝項(xiàng)目的依賴(lài)包，最后還會(huì)運(yùn)行typings install，如果你運(yùn)行完npm install發(fā)現(xiàn)’typings’目錄沒(méi)有創(chuàng)建，就需要運(yùn)行這個(gè)命令去手動(dòng)安裝:
| ? 1 | ? npm run typings -- install |
?
然后就可以運(yùn)行了:
| ? 1 | ? npm start |
?
啟動(dòng)成功以后，就會(huì)自動(dòng)打開(kāi)瀏覽器并打開(kāi)url：http://localhost:3000/?，應(yīng)該看到下面的頁(yè)面:
項(xiàng)目結(jié)構(gòu)和文件
先來(lái)看看項(xiàng)目模板里面的文件，以及他們都是做什么的:
| ? 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 |
?
下面是項(xiàng)目環(huán)境相關(guān)的文件：
package.json
這是項(xiàng)目的基本定義文件，所有的基于nodejs的項(xiàng)目都會(huì)有一個(gè)package.json文件，里面會(huì)定義項(xiàng)目名稱(chēng)、版本、依賴(lài)的庫(kù)，以及腳本。腳本里面定義了幾個(gè)可以使用npm運(yùn)行的腳本，例如：
- “start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “
用于啟動(dòng)測(cè)試服務(wù)器，啟動(dòng)的過(guò)程中執(zhí)行了編譯、檢測(cè)文件修改、啟動(dòng)服務(wù)器等任務(wù)。 - “postinstall”: “typings install”
用于在npm install完成以后執(zhí)行，下載TypeScript類(lèi)型定義文件。 - “tsc:w”: “tsc -w”
編譯TypeScript文件，并且是以’watch’模式啟動(dòng)，也就是檢測(cè)文件修改，如果有TypeScript文件被修改，自動(dòng)執(zhí)行編譯過(guò)程。
typings.json
TypeScript類(lèi)型定義文件，定義了項(xiàng)目用到的TypeScript類(lèi)，用于編譯、代碼補(bǔ)全等。
typings文件夾
運(yùn)行typings install以后，TypeScript會(huì)根據(jù)typings.json文件里面的定義，下載需要的類(lèi)型定義文件，下載的TypeScript類(lèi)文件會(huì)保存在這里。
tsconfig.json
TypeScript的配置文件，在編譯TypeScript文件的時(shí)候，會(huì)根據(jù)這個(gè)配置進(jìn)行編譯。
systemjs.config.js
SystemJS的配置文件。Angular2使用SystemJS來(lái)實(shí)現(xiàn)動(dòng)態(tài)加載，它設(shè)置每個(gè)模塊所在的位置，例如，我們的app，是從build目錄中加載，加載的文件是main.js。還有，angular模塊，也就是@angular，是從node_modules/@angular里加載。如果我們的App以后要使用其他第三方的庫(kù)，就需要在這里添加，才能夠成功加載。
下面，我們?cè)賮?lái)看看App相關(guān)的文件。
index.html
App的index文件，里面已經(jīng)添加了需要的js、css文件，然后通過(guò)SystemJS加載app。該文件里面的：
| ? 1 | ? <root-app>Loading...</root-app> |
?
定義了加載App的html組件’root-app’。
styles.css
全局的樣式定義。注意每個(gè)組件使用的樣式不是在這里面。
app/main.ts
Angular2的App初始化文件。每一個(gè)Angular2的App都是通過(guò)這個(gè)文件被加載的。
| ? 1 2 3 4 | ? import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); |
?
它首先從@angular/platform-browser-dynamic里引入了platformBrowserDynamic，從他的名字可以看出，它根據(jù)當(dāng)前的運(yùn)行環(huán)境，如操作系統(tǒng)、瀏覽器，來(lái)初始化一個(gè)運(yùn)行環(huán)境，然后從這個(gè)環(huán)境里面運(yùn)行AppModule。
app/app.module.ts
這個(gè)文件定義了我們的App，它是一個(gè)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 {} |
?
首先它引入了幾個(gè)Angular2的模塊，我們需要使用RouterModule里面定義的路由，如果有表單，需要引入FormsModule。
接下來(lái)的幾個(gè)，就是引入了這個(gè)模板項(xiàng)目里面提供的幾個(gè)組件，其中AppComponent是App的主加載模塊,?AboutComponent和ExampleComponent組件是兩個(gè)提供的實(shí)例。routes是定義的路由。
接下來(lái)再看App模塊的定義:
| ? 1 2 3 4 5 6 | ? @NgModule({ imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], declarations: [AppComponent, AboutComponent, ExampleComponent], bootstrap: [AppComponent] }) export class AppModule {} |
?
它使用NgModule標(biāo)簽定義了一個(gè)模塊，我們需要導(dǎo)入的模塊和路由、定義的組件，啟動(dòng)app使用的組件，都在這里面定義。
- app/app.routes.ts
這個(gè)是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類(lèi)，并根據(jù)這個(gè)定義app的路由。在這個(gè)路由里面，我們定義了一個(gè)默認(rèn)路由，當(dāng)你的path為空時(shí)重定向到’example’：
| ? 1 | ? { path: '', redirectTo: '/example', pathMatch: 'full'} |
?
也就是當(dāng)打開(kāi)urlhttp://localhost:3000的時(shí)候，自動(dòng)重定向到’example’，也就是http://localhost:3000/example。
同時(shí)，它還從兩個(gè)實(shí)例的組件about和example里面引入他的路由定義文件，并把它們合并到app的路由定義數(shù)組里面。
注意這里的...語(yǔ)法，這是列表的合并的語(yǔ)法，意思是，我在定義一個(gè)Routes的數(shù)組的同時(shí)，把AboutRoutes這個(gè)數(shù)組也合并到當(dāng)前的數(shù)組里面。
app/app.component.*
在上面的AppModule的定義里，我們定義了我們的app，并且定義了AppComponent是加載模塊。下面就來(lái)看看這個(gè)組件是怎么定義的。這里有3個(gè)文件，分別為’ts’, ‘css’和’html’，這也是一般一個(gè)簡(jiǎn)單的組件包含的3個(gè)部分。其中app.component.ts是組件定義的類(lèi):
| ? 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 {} |
?
這里，我們使用一個(gè)Component標(biāo)簽來(lái)定義一個(gè)組件，里面有3個(gè)屬性：
- selector，就是這個(gè)組件在它的上一級(jí)html頁(yè)面里面要填充進(jìn)那個(gè)element里。由于這個(gè)是我們的APP的主模塊，它的上一級(jí)html頁(yè)面也就是index.html。在上面的index頁(yè)面中，提到<root-app>Loading...</root-app>，這個(gè)’root-app’就是’selector’里面的這個(gè)值。當(dāng)這個(gè)AppComponent加載成功以后，這個(gè)組件的html內(nèi)容就會(huì)替換index頁(yè)面的<root-app>。
- templateUrl
這個(gè)屬性設(shè)置了這個(gè)組件使用的html模板。對(duì)于簡(jiǎn)單的頁(yè)面的話，也可以使用template來(lái)定義一個(gè)html的字符串作為模板。下面是這個(gè)模板的內(nèi)容:? 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>
上面的頁(yè)面其實(shí)就是我們的app里面的主頁(yè)面，上面header的部分就是app的頭，有2個(gè)導(dǎo)航的鏈接，分別鏈接到模板里面提供的2個(gè)實(shí)例組件(注意鏈接用的是routerLink='/about'的方式，而不是’html’的’href’的方式。)。下面就是router-outlet定義的一個(gè)空的element，Angular2會(huì)根據(jù)路由定義將當(dāng)前路徑所對(duì)應(yīng)的頁(yè)面內(nèi)容放在這個(gè)element下面。
- styleUrls
顧名思義，這個(gè)就是樣式的定義文件的路徑。同樣，我們也可以使用style來(lái)在這個(gè)文件內(nèi)定義樣式。我們多次提到Angular2是組件化的，組件之間應(yīng)該是不會(huì)相互影響，首先就是定義的樣式不會(huì)相互影響。在這個(gè)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;
}
我們不需要擔(dān)心在整個(gè)app的其他組件里面，也會(huì)有其他的html element會(huì)被header section這樣的樣式影響，這個(gè)樣式只會(huì)在這個(gè)組件內(nèi)有效。
app/example/?和 app/about/
這是一個(gè)實(shí)例組件，里面有ts, html, css。這幾個(gè)文件的功能和說(shuō)明跟上面’app.component’里的定義類(lèi)似。有一點(diǎn)區(qū)別的就是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 } ]; |
?
這個(gè)路由定義引入的是Route， 而不是之前的Routes，區(qū)別是我們?cè)赼pp模塊的路由定義里面合并每個(gè)模塊的路由定義。
到現(xiàn)在為止，我們介紹了一個(gè)Angular2的項(xiàng)目所包含的配置和代碼，了解了上面介紹的項(xiàng)目環(huán)境以后，就可以再進(jìn)一步使用gulp或者webpack來(lái)創(chuàng)建項(xiàng)目構(gòu)建的環(huán)境。如不同的運(yùn)行環(huán)境下的自動(dòng)配置，如開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境。還有代碼的混淆、壓縮、合并等，都可以通過(guò)添加一個(gè)任務(wù)來(lái)完成。
熟悉了上面的代碼以后，我們就可以來(lái)實(shí)現(xiàn)自己的業(yè)務(wù)邏輯，也就是添加一些組件，把這些組件加到AppModule里，使用第三方的jsku等。在這個(gè)教程的第二部分里，我們會(huì)介紹怎么開(kāi)發(fā)新的組件，來(lái)完成一個(gè)App。
?
?
轉(zhuǎn)載于:https://my.oschina.net/martin123/blog/776673
總結(jié)
以上是生活随笔為你收集整理的Angular2入门教程-1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vmware workstation 网
- 下一篇： [python] 之all()和any(