Angular 從0到1 (一）史上最簡單的Angular教程

時間 2019-11-06

原文原文鏈接

第一節：初識Angular-CLI
第二節：登陸組件的構建
 第三節：創建一個待辦事項應用
 第四節：進化！模塊化你的應用
 第五節：多用戶版本的待辦事項應用
 第六節：使用第三方樣式庫及模塊優化用
 第七節：給組件帶來活力
 Rx--隱藏在Angular 2.x中利劍
 Redux你的Angular 2應用
 第八節：查缺補漏大合集(上)
第九節：查缺補漏大合集(下)javascript

第一章：認識Angular 2.0

Angular2簡介

Angular 2 是Google推出的一個跨平臺全終端的框架，和目前比較火的React和Vue.js相比，有以下優勢：css

因爲Google的目的是推出一個完整解決方案，因此官方默認提供的類庫（好比routing，http，依賴性注入（DI）等）很是完整，無需本身選擇。React的一大痛點就是選擇太多致使在配置尋找組件和類庫的過程當中消耗太多精力，固然從另外一方面看這也是其優點，選擇衆多且自由。
官方支持TypeScript（微軟出品，是JavaScript的超集，是 JavaScript 的強類型版本）做爲首選編程語言，使得開發腳本語言的一些問題能夠更早更方便的找到。
RxJS友好使得響應式編程在Augular2中變得極爲容易（Google開發的框架依賴這麼多的微軟的產品，可見微軟的轉型仍是很成功的）
支持NativeScript甚至ReactNative等進行原生Android/iOS應用開發（React支持React Native）
支持服務器端渲染（React也支持）

但整體來說，我的認爲Angular2更適合從原生App開發或後端Java/.Net等轉型過來開發前端的程序員，由於它的開發模型更接近於傳統強類型語言的模式，加上官方內建的組件和類庫比較完整，有官方中文網站 https://angular.cn ，學習曲線要低一些。有過Angular 1.x 開發經驗的同窗要注意了，雖然只有一個版本號的差距，但2.x和1.x是徹底不一樣的，不要奢望1.x的應用會平滑遷移到2.x。html

Angular 支持大多數經常使用瀏覽器，包括下列版本：前端

Chrome	Firefox	Edge	IE	Safari	iOS	Android	IE Mobile
45以上	40以上	13以上	9以上	7以上	7以上	4.1以上	11以上

環境配置要求

Angular2須要node.js和npm，咱們下面的例子須要node.js 6.x.x和npm 3.x.x，請使用 node -v 和 npm -v 來檢查。因爲衆所周知的緣由，npmjs.org 的站點訪問常常不是很順暢，這裏給出一個由淘寶團隊維護的國內鏡像 npm.taobao.org/ 。安裝好node後，請打開命令行窗口（ Windows 用戶推薦使用 PowerShell，其它平臺打開 Terminal 便可）輸入npm config set registry https://registry.npm.taobao.org 。或者直接使用淘寶團隊的 cnpm，使用下面的命令安裝 cnpm : npm install -g cnpm --registry=https://registry.npm.taobao.org。java

和官方快速起步文檔給出的例子不一樣，咱們下面要使用Angular團隊目前正在開發中的一個工具--Angular CLI 。這是一個相似於React CLI和Ember CLI的命令行工具，用於快速構建Angular2的應用。它的優勢是進一步屏蔽了不少配置的步驟、自動按官方推薦的模式進行代碼組織、自動生成組件/服務等模板以及更方便的發佈和測試代碼。目前這個工具已經正式發佈l，安裝時請使用 npm install -g @angular/cli 命令。這個安裝過程有些長，請務必等待命令行提示符從新出現。安裝好以後，咱們就可使用一個叫作 ng 的命令了，這個命令是咱們後面常常要打交道的：包括建立新工程，啓動工程，編譯等。node

IDE的選擇也比較多，免費的Visual Studio Code 和 Atom，收費的有WebStorm。咱們這裏推薦採用 Visual Studio Code，能夠到 code.visualstudio.com/ 下載 Windows/Linux/MacOS 版本。react

安裝完以上這些工具，開發環境就部署好了，下面咱們將開始Angular2的探險之旅。git

第一個小應用 Hello Angular

那麼如今開啓一個terminal（命令行窗口），鍵入 ng new hello-angular程序員

如上圖所示，這個命令爲咱們新建了一個名爲「hello-angular」的工程，進入該工程目錄，鍵入 code . 能夠打開IDE看到以下目錄github

使用Mac的用戶可能發現找不到咱們剛纔使用的命令行的 code，您須要經過IDE安裝一下，點擊F1，輸入install，便可看到「在Path中安裝code命令」，選擇以後就ok了。

大概瞭解了文件目錄結構後，咱們從新回到命令行，在應用根目錄鍵入 ng serve 能夠看到應用編譯打包後server運行在4200端口。

打開瀏覽器輸入 http://localhost:4200 便可看到程序運行成功啦！

自動生成的太沒有成就感了是否是，那麼咱們動手改一下吧。保持運行服務的命令窗口，而後進入VSCode，打開 src/app/app.component.ts 修改title，好比： title = 'This is a hello-angular app';，保存後返回瀏覽器看一下吧，結果已經更新了，這種熱裝載的特性使得開發變得很方便。

第一個組件

那麼咱們來爲咱們的app增長一個Component吧，在命令行窗口輸入 ng generate component login --inline-template --inline-style 。顧名思義，參數generate是用來生成文件的，參數component是說明咱們要生成一個組件，login呢是咱們的組件名稱，你能夠本身想個其餘有意思的名字。後面的兩個參數是告訴angular-cli：生成組件時，請把組件的HTML模板和CSS樣式和組件放在同一個文件中（其實分開文件更清晰，但第一個例子咱們仍是採用inline方式了）。

是否是感受這個命令行太長了？幸運的是Angular團隊也這麼想，因此你能夠把上面的命令改寫成 ng g c login -it -is ,也就是說能夠用generate的首字母g來代替generate，用component的首字母c來代替component，相似的--inline-template的兩個詞分別取首字母變成-it

angular-cli爲咱們在\src\app目錄下生成了一個新文件夾login，在login目錄下生成了2個文件，其中 login.component.spec.ts 是測試文件，咱們這裏暫時不提。另外一個是 login.component.ts 這個就是咱們新建的Component了。

Angular提倡的文件命名方式是這樣的：組件名稱.component.ts ，組件的HTML模板命名爲： 組件名稱.component.html，組件的樣式文件命名爲： 組件名稱.component.css,你們在編碼中儘可能遵循Google的官方建議。

咱們新生成的Login組件源碼以下

import { Component, OnInit } from '@angular/core';

//@Component是Angular提供的裝飾器函數，用來描述Compoent的元數據
//其中selector是指這個組件的在HTML模板中的標籤是什麼
//template是嵌入（inline）的HTML模板，若是使用單獨文件可用templateUrl
//styles是嵌入（inline）的CSS樣式，若是使用單獨文件可用styleUrls
@Component({
  selector: 'app-login',
  template: ` <p> login Works! </p> `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}複製代碼

那麼這個組件建成後，咱們怎麼使用呢？注意上面的代碼中@Component修飾配置中的 selector: 'app-login'，這意味着咱們能夠在其餘組件的template中使用 <app-login></app-login> 來引用咱們的這個組件。

如今咱們打開 hello-angular\src\app\app.component.html 加入咱們的組件引用

<h1>
  {{title}}
</h1>
<app-login></app-login>複製代碼

保存後返回瀏覽器，能夠看到咱們的第一個組件也顯示出來了。

image_1b27qsmhp1nlrb8g1uh6cp71qcj9.png-19kB

一些基礎概念

這裏咱們粗略介紹一些Angular的基礎概念，這些基礎概念在後面的章節中會更詳細的講解。

什麼是模塊？

簡單來講模塊就是提供相對獨立功能的功能塊，每塊聚焦於一個特定業務領域。Angular內建的不少庫是以模塊形式提供的，好比FormsModule封裝了表單處理，HttpModule封裝了Http的處理等等。

每一個Angular應用至少有一個模塊類 —— 根模塊，咱們將經過引導根模塊來啓動應用。按照約定，根模塊的類名叫作AppModule，被放在 app.module.ts 文件中。咱們這個例子中的根模塊位於 hello-angular\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }複製代碼

@NgModule裝飾器用來爲模塊定義元數據。declarations列出了應用中的頂層組件，包括引導性組件AppComponent和咱們剛剛建立的LoginComponent。在module裏面聲明的組件在module範圍內均可以直接使用，也就是說在同一module裏面的任何Component均可以在其模板文件中直接使用聲明的組件，就想咱們在AppComponent的模板末尾加上 <app-login></app-login> 同樣。

imports引入了3個輔助模塊：

BrowserModule提供了運行在瀏覽器中的應用所須要的關鍵服務（Service）和指令（Directive），這個模塊全部須要在瀏覽器中跑的應用都必須引用；
FormsModule提供了表單處理和雙向綁定等服務和指令
HttpModule提供Http請求和響應的服務

providers列出會在此模塊中「注入」的服務（Service），關於依賴性注入會在後面章節中詳細解釋。

bootstrap指明哪一個組件爲引導性組件（本案例中的AppComponent）。當Angular引導應用時，它會在DOM中渲染這個引導性組件，並把結果放進index.html的該組件的元素標籤中（本案例中的app-root）。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>複製代碼

引導過程

Angular2經過在main.ts中引導AppModule來啓動應用。針對不一樣的平臺，Angular提供了不少引導選項。下面的代碼是經過即時（JiT）編譯器動態引導，通常在進行開發調試時，默認採用這種方式。

//main.ts
import './polyfills.ts';

// 連同Angular編譯器一塊兒發佈到瀏覽器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}
//Angular編譯器在瀏覽器中編譯並引導該應用
platformBrowserDynamic().bootstrapModule(AppModule);複製代碼

另外一種方式是使用預編譯器（AoT - Ahead-Of-Time）進行靜態引導，靜態方案能夠生成更小、啓動更快的應用，建議優先使用它，特別是在移動設備或高延遲網絡下。使用static選項，Angular編譯器做爲構建流程的一部分提早運行，生成一組類工廠。它們的核心就是AppModuleNgFactory。引導預編譯的AppModuleNgFactory的語法和動態引導AppModule類的方式很類似。

// 不把編譯器發佈到瀏覽器
import { platformBrowser } from '@angular/platform-browser';

// 靜態編譯器會生成一個AppModule的工廠AppModuleNgFactory
import { AppModuleNgFactory } from './app.module.ngfactory';

// 引導AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);複製代碼

本節代碼：github.com/wpcfan/awes…

下一節咱們再繼續，記住大叔能學會的你也能。

紙書出版了，比網上內容豐富充實了，歡迎你們訂購！
京東連接：item.m.jd.com/product/120…