iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Modern Web

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

Angular結構是什麼呢?

  • 分享至 

  • xImage
  •  

為什麼要了解Angular結構?/images/emoticon/emoticon16.gif
這裡使用學習程式的經過來練習~/images/emoticon/emoticon06.gif

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

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

  1. 登入+準備好要開工
    https://ithelp.ithome.com.tw/upload/images/20200903/20119035wcmVcotA2y.png

  2. 使用官網提供的https://stackblitz.com/angular/vmgxnnvnjyr?file=src%2Fapp%2Fapp.component.ts
    來練習~/images/emoticon/emoticon14.gif

https://ithelp.ithome.com.tw/upload/images/20200903/20119035cibscE1sDE.png

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

https://ithelp.ithome.com.tw/upload/images/20200903/20119035k2gXa39AV0.png

  1. 貼上程式碼

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

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

</div>

https://ithelp.ithome.com.tw/upload/images/20200903/20119035gG3A7wCUP6.png

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

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

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

</div>

https://ithelp.ithome.com.tw/upload/images/20200903/2011903594Ly8AFylw.png

  1. 貼上程式碼:新增商品說明。在 標籤上,使用 *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>

https://ithelp.ithome.com.tw/upload/images/20200903/20119035BnDp2H8Hup.png

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

<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>

https://ithelp.ithome.com.tw/upload/images/20200903/20119035yBETMAMuei.png

  1. 測試 “Share” 按鈕=按下去~
    https://ithelp.ithome.com.tw/upload/images/20200903/20119035MKDDI2KDrh.png

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


二.進階階段:追根溯源,知其所以然/images/emoticon/emoticon19.gif

Angular結構:
https://ithelp.ithome.com.tw/upload/images/20200903/2011903590ps1oIrLZ.png

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 ]程式進入點

https://ithelp.ithome.com.tw/upload/images/20200903/20119035Xqpw2ELxHW.png

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>

https://ithelp.ithome.com.tw/upload/images/20200903/20119035b4sg4iubby.png

是重點=載入程式碼標記

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

https://ithelp.ithome.com.tw/upload/images/20200903/20119035P6u9M0E5vf.png

5..angular-cli.json是Angular CLI組態

以上是Angular結構~

DEAR ALL 我們明天見~/images/emoticon/emoticon29.gif


上一篇
如何安裝Angular呢?
下一篇
來寫HTML?
系列文
把前後分離製作的網站組起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言