DAY5-Angular6之app資料夾下的檔案內容說明

2019 iT 邦幫忙鐵人賽

DAY 5

Modern Web

Angular初期筆記系列第 5 篇

2019鐵人賽 app.component.html index.html app.component.ts app.module.ts

馬達

2018-10-15 13:48:54

2387 瀏覽

分享至

app資料夾下的檔案內容說明

app.module.ts

src/app/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 { }

import

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

將檔案 @angular/platform-browser 內的 BrowserModule 匯入到這個檔案

符號：@

Decorator (中文：裝飾器)
Angular 所有 Decorator 項目：https://angular.io/api?type=decorator
有使用到就需要 import 進檔案中

@NgModule

[1]@NgModule使用到的項目

項目	描述
declarations (宣告)	一組屬於這個 module 的 components、directives、pipes(要申報的) 的參數
imports (匯入)	一組 NgModules 參數，其輸出需申請才可使用的 template 在這個 module 上
providers (供應商)	一組 injectable objects 在 injector(注射器)或這個 module 的參數
bootstrap (引導)	一組 module 和 component 都被引導好的參數，這個 components 會自動被列上 entryComponents (入口components)

BrowserModule：angular 所有的基礎架構的 Moduel
AppRoutingModule：規劃路由的 Module
AppComponent：這個 Module 有使用到的 component

app.component.ts

src/app/app.component.ts
-----
import { Component } from '@angular/core';

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

@Component

[2]@Component 所擁有的項目

項目	描述
selector (選擇器)	CSS選擇器識別 directive 在 template 並觸發 directive 實體化
templateUrl (樣板Url)	使用外部 html 檔案
styleUrls (樣式Urls)	使用外部 css 檔案

title

變數名稱
將 'app' 這個 string 字串給 title 變數當作值

app.component.html

src/app/app.component.html (僅擷取需要部份)
-----
<div style="text-align:center">
    <h1>
        Welcome to {{ title }} !
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0">
</div>
<router-outlet></router-outlet>

{{title}} 的 {{ }} 這邊稱為單向繫結，英文是稱為 Interpolation(插入)
Angular 會自動從 app.component.ts 中提取 title 屬性的值，並將這些值插入到瀏覽器中。
當這些屬性發生更改時，Angular會更新顯示。
https://angular.io/guide/displaying-data

router-outlet 的 html標籤

由路由控制顯示哪個結果 (這個專案目前有沒使用到)

src資料夾下

src/index.html

src/index.html
-----
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ForIT</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>