Angular結構是什麼呢?

第 12 屆 iThome 鐵人賽

DAY 3

Modern Web

把前後分離製作的網站組起來系列第 3 篇

12th鐵人賽

Tzu

2020-09-03 21:57:22

992 瀏覽

分享至

為什麼要了解Angular結構?
這裡使用學習程式的經過來練習~

一.起步階段:能正確運行，不理解的地方先跳過，大量的模仿練習

使用[]https://stackblitz.com/?fbclid=IwAR2MRiQx13ehr5TA3tvp-Tnga2XKwni34aTlTWPeJvlwp-j0bWaiWynXQzs(http://)
來練習~
參考https://angular.tw/start 來做第一個練習

登入+準備好要開工
使用官網提供的https://stackblitz.com/angular/vmgxnnvnjyr?file=src%2Fapp%2Fapp.component.ts
來練習~

找到 product-list 資料夾中，開啟範本檔案 product-list.component.html

貼上程式碼


<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>

貼上程式碼:新增一個元素，並使用屬性繫結語法 [] 把該連結的 title 設定成該商品的名字


<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

貼上程式碼:新增商品說明。在標籤上，使用 *ngIf 指令


<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

貼上程式碼:新增一個按鈕


<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>

測試 “Share” 按鈕=按下去~

但是打完之後~大概只記得的複製貼上的ctrl+c和ctrl+v的動作，自己到底打了什麼也不知道，
所以就要了解Angular結構~

二.進階階段:追根溯源，知其所以然

Angular結構:

1.app.component.ts根元件(啟動程式原始碼的位置)(這裡不知道為什麼貼出來黑黑QQ)

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

@NgModule 是TypeScript的語法定義這個是Angular模組
AppComponent宣告程式中使用的元件
imports匯入其他功能模組
bootstrap: [ AppComponent ]程式進入點

2.app.module.ts主要模組

3.index.html根HTML**(最重要=決定載入的檔案)**

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular Getting Started</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

是重點=載入程式碼標記

4.main.ts進入點**(第2重要=載入什麼Angular模組)**(這裡不知道為什麼貼出來黑黑QQ)

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

使用enableProdMode模組
platformBrowserDynamic().bootstrapModule(AppModule); 啟動AppModule