Angular2入门教程-1
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vmware workstation 网
- 下一篇: [python] 之all()和any(