iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

Angular初期筆記系列 第 5

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

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

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

base 的 html 標籤

https://angular.io/guide/router#base-href
href="/", 構成導航的 Urls

app-root 的 html 標籤

對照到 app.component.ts 中 @Component 的 selector (中文:選擇器)

參考來源

[1] @NgModule選項
[2] @Component選項


上一篇
DAY4-Angular6之架構和常用詞彙
下一篇
DAY6-Angular6之假如app是舞台劇/@Component項目
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言