---
title: Angular
tags: Note_Program, Angular
description: Angular, Program, Online
---

# Angular
https://docs.google.com/presentation/d/1NKYoQ3-Bt1Je-VhULKuWBDQdG1tP5TBx-RbRzSCdQxw/edit#slide=id.p7

## book
Angular 企業級應用開發實戰
ISBN: 7121367572
ISBN-13: 9787121367571
https://www.tenlong.com.tw/products/9787121367571?list_name=sp

Angular 從零到一 Angular从零到
ISBN: 7111562836
ISBN-13: 9787111562832
https://www.tenlong.com.tw/products/9787111562832?list_name=lv

# Angular

https://angular.tw/tutorial/toh-pt1

### 使用 UppercasePipe 進行格式化
{{hero.name | uppercase}} Details

### 雙向繫結
<input [(ngModel)]="hero.name" placeholder="name">

app.module.ts
import { FormsModule } from '@angular/forms';

### Routes
路由的基本觀念
https://medium.com/chikuwa-tech-study/angular-%E7%AC%AC8%E8%AA%B2-%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A7%80%E5%BF%B5-fe2d91e81944

Define your routes in your Routes array.
app-routing.module.ts

//const routes: Routes = [];
const routes: Routes = [
  { path: '', component: ListComponent },
  { path: 'add', component: AddComponent },
  { path: 'update', component: UpdateComponent },
];

<a href="要前往的網址">超連結文字</a>
<a href="https://www.google.com/">Google首頁</a>

但如果要透過Angular路由模組的幫助，做法就有一點點不同了。請開啟app.component.html，在<router-outlet>的上方加入一個超連結，文字顯示「Heroes」，並用「<nav>」標籤包起來：

<a routerLink="要前往的網址">超連結文字</a>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

### Angular-第9課-路由攜帶參數
https://medium.com/chikuwa-tech-study/angular-%E7%AC%AC9%E8%AA%B2-%E8%B7%AF%E7%94%B1%E6%94%9C%E5%B8%B6%E5%8F%83%E6%95%B8-39a4d4f05448

首先請開啟之前建立的路由模組（app-routing-module.ts），在routes陣列中添加一組路由：

{ path: 'detail/:id', component: HeroDetailComponent }

(update.component.ts)

import { ActivatedRoute } from '@angular/router';

讓它在ngOnInit生命週期函數被呼叫。實作的內容如下：

  abc = 0;
  constructor(
    public r: ActivatedRoute
  ) { }

  ngOnInit(): void {
    let a = this.r.snapshot.paramMap.get('abc');
    console.log(a);
    this.abc = +a;
  }

### 生命週期

https://stackblitz.com/

### Alt Shift F

# Angular

https://angular.tw/tutorial/toh-pt1

### 使用 UppercasePipe 進行格式化
{{hero.name | uppercase}} Details

### 雙向繫結
<input [(ngModel)]="hero.name" placeholder="name">

app.module.ts
import { FormsModule } from '@angular/forms';

### Routes
路由的基本觀念
https://medium.com/chikuwa-tech-study/angular-%E7%AC%AC8%E8%AA%B2-%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A7%80%E5%BF%B5-fe2d91e81944

Define your routes in your Routes array.
app-routing.module.ts

//const routes: Routes = [];
const routes: Routes = [
  { path: '', component: ListComponent },
  { path: 'add', component: AddComponent },
  { path: 'update', component: UpdateComponent },
];

<a href="要前往的網址">超連結文字</a>
<a href="https://www.google.com/">Google首頁</a>

但如果要透過Angular路由模組的幫助，做法就有一點點不同了。請開啟app.component.html，在<router-outlet>的上方加入一個超連結，文字顯示「Heroes」，並用「<nav>」標籤包起來：

<a routerLink="要前往的網址">超連結文字</a>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

### Angular-第9課-路由攜帶參數
https://medium.com/chikuwa-tech-study/angular-%E7%AC%AC9%E8%AA%B2-%E8%B7%AF%E7%94%B1%E6%94%9C%E5%B8%B6%E5%8F%83%E6%95%B8-39a4d4f05448

首先請開啟之前建立的路由模組（app-routing-module.ts），在routes陣列中添加一組路由：

{ path: 'detail/:id', component: HeroDetailComponent }

(update.component.ts)

import { ActivatedRoute } from '@angular/router';

讓它在ngOnInit生命週期函數被呼叫。實作的內容如下：

  abc = 0;
  constructor(
    public r: ActivatedRoute
  ) { }

  ngOnInit(): void {
    let a = this.r.snapshot.paramMap.get('abc');
    console.log(a);
    this.abc = +a;
  }

### 生命週期

https://stackblitz.com/

### Alt Shift F

# 上課筆記
https://hackmd.io/HvrEo02eTOSeWoNoeY8Iyw

# CSS
CSS diner
Amos
jsbin
Flexbox Froggy

## Install
VSCode
https://inc-s3.ntub.edu.tw/shyong/Tools/VSCodeUserSetup-x64-1.44.0.exe

node js
https://inc-s3.ntub.edu.tw/shyong/Tools/node-v12.16.3-x64.msi

C:\Users\User>node -v
v12.14.1

C:\Users\User>npm -v
6.13.4

#C:\Users\User>npm install -g @angular/cli

### Install Angular cli
#npm install -g @angular/cli
C:\Users\User>npm install -g @angular/cli
C:\Users\User>ng version
### New project
C:\Users\User>cd Desktop
#ng new [Name] 專案名稱
C:\Users\User\Desktop>ng new demo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss

### Run project
C:\Users\User\Desktop>cd demo
C:\Users\User\Desktop\demo>code .
C:\Users\User\Desktop\demo>ng serve
#http://localhost:4200/
#https://stackblitz.com/
#VS Code install Angular Extension Pack
#Ctrl + C
C:\Users\User\Desktop\demo>ng g c own-btn
#CREATE src/app/own-btn/own-btn.component.html (22 bytes)
#CREATE src/app/own-btn/own-btn.component.spec.ts (629 bytes)
#CREATE src/app/own-btn/own-btn.component.ts (278 bytes)
#CREATE src/app/own-btn/own-btn.component.css (0 bytes)
#UPDATE src/app/app.module.ts (477 bytes)

#C:\Users\User\Desktop\demo>code .
C:\Users\User\Desktop\demo>ng serve
#編輯 demo\src\app.component.html

<app-own-btn></app-own-btn>
<app-own-btn></app-own-btn>
<app-own-btn></app-own-btn>

<app-own-btn></app-own-btn>

#編輯 demo\src\app\own-btn\own-btn.component.html

<h1>你今年:{{age}}幾歲</h1>
<input type="text" [value]="age">
<input type="text" [(ngModel)]="age">

#完成加法

<input type="text" [(ngModel)]="x">
+
<input type="text" [(ngModel)]="y">
={{x + y}}

#比較text和number差異

<input type="number" [(ngModel)]="x">
+
<input type="number" [(ngModel)]="y">
={{x + y}}

'單向綁定{{}}'
'双向綁定[(ngModel)]'

#編輯 demo\src\app\own-btn\own-btn.component.ts
#age = 10;
#x = 0;
#y = 0;

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

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

  age = 10;
  x = 0;
  y = 0;

  constructor() { }

  ngOnInit(): void {
  }

}

#編輯 demo\src\app\app.module.ts
import { FormsModule } from '@angular/forms'; #加入
FormsModule #加入
#node_modules\@angular\forms\forms.d.ts #

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

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

import { FormsModule } from '@angular/forms';

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

'双向綁定{{}}'

#Save File : Ctrl+S
C:\Users\User\Desktop\demo>ng serve
#http://localhost:4200/ 看結果
#own-btn works!

## bootstrap
https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/

#編輯 demo\src\app.component.html

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <app-own-btn></app-own-btn>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>

#vs code online
#https://stackblitz.com/
#http://bit.ly/35Lfdwz

## Visual Studio Code 程式碼格式化快速鍵使用流程
https://tedliou.com/archives/vs-code-autoformat/
https://www.ucamc.com/e-learning/computer-skills/315-%E5%A6%82%E4%BD%95%E5%9C%A8vscode%E4%B8%AD%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A2%BC%E8%87%AA%E5%8A%A8%E6%8E%92%E7%89%88%E5%BF%AB%E6%8D%B7%E9%94%AE
方法一、使用預設快速鍵進行格式化
直接 Ctrl + A 全選，再按下 Alt + Shift + F 就能進行格式化。

Material Ocon Theme

text
text
text
text
CTRL + D

# 以下無關
primeng

file-tree-generator
Angular Extension Pack

chrome Augury

[ ] = ts --> html
( ) = html --> ts
[()]

## auth
ng g guard auth --implements CanActivate

## Angular Extension Pack
## Live Share
## chrome 線上應用程式商店 Augury
https://bit.ly/2JYwlqw

https://bit.ly/2IopeEF

http://localhost:4200/

https://stackblitz.com/edit/angular-ccwprx

## Angular Material

## NgxSpinner
pacman