Angular 入門

by vivid 1. 五月 2019 10:13

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N190520701
出刊日期: 2019/5/1

在這篇文章中,將要介紹如何利用Angular CLI(Command Line Interface)工具程式建立Angular 7 專案,安裝Angular CLI開發環境,以及介紹一個Angular專案的檔案結構與項目,以讓你了解如何透過Angular來開發前端網頁程式的準備與基本入門。

安裝Angular CLI(Command Line Interface)工具程式

首先開發環境之中要先安裝Angular CLI(Command Line Interface)工具程式,此程式可以協助我們建立一個Angular 7 專案,以方便進行開發的動作。若要安裝Angular CLI(Command Line Interface)工具程式,可以透過「npm」工具程式來進行下載。「npm」工具程式隨著Node.js散發,也就是說只要安裝「Node.js」就會自動安裝「npm」工具程式。你可以由Node.js官網(https://nodejs.org/en/)下載並安裝「Node.js」。「Node.js」安裝完成之後,可以在命令提示字元輸入以下「npm install」指令來安裝Angular CLI(Command Line Interface)工具程式,其中的「-g」參數表示要安裝成全域套件:

npm install -g @angular/cli

完成之後便可以利用「ng」 來執行命令。

 

建立專案

接下來我們來了解如何建立專案。首先在命令提示字元輸入以下指令,建立專案程式要存放的資料夾,例如以下範例將放在「agDemo」資料夾中:

mkdir agDemo

在命令提示字元輸入以下指令,切換到目前工作路徑到「agDemo」資料夾:

cd agDemo

在命令提示字元輸入以下指令,使用「ng new」建立一個名為「agWeb」專案:

ng new agWeb

接著命令提示字元會提示是否加入路由與CSS使用的格式,目前只要按下「Enter」鍵接收預設值便可,然後需要稍待一下,建立專案需要花費一段時間下載相關套件,執行的結果如下圖所示:

clip_image002

圖 1:建立新專案。

在命令提示字元輸入以下指令,切換到目前工作路徑到「agWeb」資料夾:

cd agWeb

在命令提示字元輸入以下指令:

ng serve

這個指令會編譯目前的專案,並且啟動網站伺服器,預設伺服器會接聽在「4200」埠,執行的結果請參考下圖所示:

clip_image004

圖 2:編譯專案,並且啟動網站伺服器。

若想要在編譯專案,啟動網站伺服器之後,能順便開啟瀏覽器帶出網站首頁,則可以使用參數「-o」:

ng serve –o

這個範例程式的執行結果參考如下:

clip_image006

圖 3:啟動範例網站。

Angular專案

我們來檢視一下新建立的Angular專案包含的檔案與檔案結構:

l 「e2e」資料夾:端對端(End-To-End)測試資料夾,通常用於整合測試(Intergration Testing)。

l 「e2e/protractor.conf.js」檔案:Protractor單元測試組態檔案。

l 「node_modules」資料夾:npm套件存放地。

l 「src」資料夾:原始程式檔案存放地。

l 「src/karma.conf.js」檔案:用於Protractor單元測試框架。

l 「editorconfig」檔案:用來設定規則,限定程式設計風格的一致性,例如設定空白要兩格、或四格的規則,提供工具檢查或排版的依據。

l 「angular.json」檔案:設定專案名稱、版本等專案相關資訊。

l 「gitignore 」檔案:設定不放到Git Repository(版本庫、套件庫)的檔案。

l 「assets」資料夾:可用來存放圖片檔案、JavaScript程式檔案。

l 「environments」資料夾:用於開發環境與生產環境(Production)的編譯設定,包含兩個檔案:「environment.prod.ts」與「environment.ts」。

l 「favicon.ico」檔案:預設的網站圖示檔。

l 「styles.css」檔案:用於加入全域樣式。

l 「test.ts」檔案:包含單元測試程式碼。

l 「tsconfig.app.json」檔案:儲存編譯階段的組態設定。

l 「typings.d.ts」檔案:TypeScript定義檔。

l 「main.ts」檔案:專案的進入點,預設匯入angular核心模組「@angular/core」與「@angular/platform-browser-dynamic」、專案中的「./app/app.module」與「./environments/environment」。

目前「main.ts」檔案程式的內容看起來如下:

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


當「platformBrowserDynamic().bootstrapModule(AppModule)」這行程式在瀏覽器執行時,會將「index.html」檔案載入,然後執行AppModule(app.module.ts),AppModule又叫用AppComponent。

l 「index.html」檔案:定義網站首頁的HTML結構。目前「index.html」檔案的內容參考如下:

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AgWeb</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></app-root>
</body>
</html>


<body>標籤中的<app-root></app-root>對應到「app.component.ts」檔案中的「selector」,並插入元件「app.component.html」的執行結果。

l 「polyfills.ts」檔案:用於產生向下相容的JavaScript程式碼。

l 「package.json」檔案:記錄專案安裝的套件與開發相依套件、套件版本等資訊。目前「package.json」檔案的內容參考如下:

package.json

{
  "name": "ag-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

l 「tsconfig.json」檔案:「用來指定TypeScript程式編譯的選項,以便於引導編譯器編譯程式碼。目前「tsconfig.json」檔案的內容參考如下:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

l 「tslint.json」檔案:編譯規則設定檔案。

l 「src/app/app.module.ts」檔案:預設檔案內容如下,其中包含匯入一些外部程式庫的程式碼:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular中的模組(Module)用來將相關的元件(Component)、指示詞(Directive)、服務(Service)群組在一起。你可以利用「@NgModule」來定義模組。模組中需要使用「import」關鍵字匯入「@angular/core」。

模組中的「declarations」屬性的值是一個陣列,其中包含了「AppComponent」元件,此元件是專案建立時,設定的預設元件。「imports」屬性的值是一個陣列,設定要匯入的其它模組,預設包含「BrowserModule」、「AppRoutingModule」模組。「providers」屬性用來設定要使用的服務(Service);「bootstrap」屬性設定程式啟動時預設要建立的元件。

 

元件(Component)

元件(Component)是Angular 應用程式的基本單位,元件包含三個重要的檔案:「app.component.css」、「app.component.html」與「app.component.ts」檔案。其中「app.component.css」檔案:用來加入元件的CSS樣式;「app.component.html」檔案用來加入元件的HTML結構,目前檔案內容如下:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz=略">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

「app.component.ts」檔案:用來加入元件的處理邏輯,毋庸置疑「app.component.ts」檔案就是撰寫元件的核心,目前檔案的內容如下:

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'agWeb';
}


讓我們針對目前程式碼做些小小的修改,程式改寫如下,將網站的標題(title)改為「MyWeb」:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyWeb';
}


接著修改「app.component.css」檔案中的程式碼,加入自訂樣式:

.main {

background-color: honeydew;

}

修改「app.component.html」檔案中的程式碼,定義元件的HTML標籤,利用{{}}資料繫結(Data Binding)語法來顯示「AppComponent」元件「title」屬性中設定的網站標題,而{{ title }} 的值是由「app.component.ts」檔案中的程式來進行初始化。:

<div class="main">
  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
  </div>
</div>

若先前使用參數「-o」來編譯專案、啟動網站伺服器,與開啟瀏覽器帶出網站首頁:

ng serve –o

則只需要切換到瀏覽器,修改過的網站首頁的內容會自動更新顯示在瀏覽器中。這個範例程式的執行結果參考如下:

clip_image008

圖 4:網站執行結果。

除了前文提及的「app.component.css」、「app.component.html」與「app.component.ts」三個檔案之外,元件還包含「app.component.spec.ts」檔案,其中包含了元件的單元測試程式碼,目前的程式看起來如下:

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'agWeb'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('agWeb');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to agWeb!');
  });
});

 

自訂元件

Angular的開發都是繞著元件打轉,我們可以利用Angular CLI(Command Line Interface)工具程式來自訂自己的元件。例如切換到命令提示字元,在專案根目錄,輸入以下指令,建立一個「contact」元件,來顯示資料:

ng generate component contact

這個命令執行結果,請參考下圖所示:

clip_image010

圖 5:建立「contact」元件。

此外你也可以利用簡短的命令來加快設計的速度,上述的命令可以改寫為:

ng g c contact

新建立的元件相關檔案會置放於「.\src\app\ contact」資料夾之中,請參考下圖所示:

clip_image012

圖 6:元件檔案結構。

目前「contact.component.html」檔案包含的程式如下,使用HTML標籤顯示一個文字字串:

contact.component.html

<p>
  contact works!
</p>

而「contact.component.ts」檔案包含的程式如下:

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

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

檢視「app.module.ts」檔案,會自動加入「import」指令匯入「contact」元件的程式碼:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



 

客製化首頁

讓我們來修改一下程式碼,讓網站首頁直接顯示出「contact」元件的資訊。修改「app.module.ts」檔案,將「bootstrap」屬性設定成「ContactComponent」:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [ContactComponent]
})
export class AppModule { }


修改「index.html」檔案,將<body>之中的標籤修改如下:

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AgWeb</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-contact></app-contact>
</body>
</html>


切換到瀏覽器,網站首頁將顯示「contact」元件的內容:

clip_image014

圖 7:修改首頁程式執行結果。

使用資料繫結語法

讓我們來加入連絡人資訊,修改「contact.component.ts」檔案中的程式,在「ContactComponent」類別之中宣告三個屬性,分別紀錄「email」、「address」、「phone」資訊:

contact.component.ts

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

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {
  email: string = 'Support@example.com';
  address: string = "One UCOM Way";
  phone: string = "123456789";
  constructor() { }
  ngOnInit() {
  }
}

 

接著修改「contact.component.html」檔案,使用資料繫結語法,將資料呈現出來:

contact.component.html

<p>
  contact Info
</p>

<address>
  {{address}} <br />

</address>
Phone : <a href="tel:{{phone}}">{{phone}}</a>
<address>
  <strong>Support:</strong> <a href="mailto:{{email}}">{{email}}</a><br />
</address>


 

切換到瀏覽器,網站首頁將顯示「contact」元件的內容:

clip_image016

圖 8:使用資料繫結語法呈現連絡人資訊。

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript | TypeScript | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List