剛開始成為工程師之後，每一天都很焦慮想著：”Angualr 怎麼用…“

於是花了一點學習，做了些筆記紀錄自己的學習歷程。

目標：了解 Angular 如何安裝、基本的介紹

安裝Angular Cli

1. 在電腦上安裝Angular => (sudo) npm install -g @angular/cli
2. 建立cli => ng new [專案資料夾名稱]
3.  進入cli 資料夾 => cd [專案資料夾名稱]
4. 進入虛擬伺服器 => ng serve

• 專按資料夾命名不可以空格，以線替代間隔 ex: my-first-app
• 名稱可後方加入 “ ** — no-strict ” ，來取消程式碼撰寫的嚴格strict限制
  
  

建立元件

接下來下一個指令，在 terminal 輸入新增元件 Component 到指定的路徑位置 :

1. ng g component <path/component-name> 或
2. ng generate component <path/component-name>


新增物件資料夾，包含Html、CSS、TypeScript

元件介紹

TypeScript 檔在 @Component 內綁定著HTML以及CSS ，並設定 Constructor、Provider 做依賴注入：

@Component內含的基本架構:

1. selector
2. templateUrl
3. styleUrls

@Component 內的屬性除了使用Url帶入，也可彈性使用或是字串的方式來帶入內容：

1. [selector]：
   
   Html對應selector的方式
   
2. [template]：
   
3. [styles]：
   

Constructor

作用為依賴注入(Dependency Injection, DI)，定義後的參數作為類別的屬性使用，可搭配service注入。參考文章

constructor(heroService: HeroService) //可注入外部源、service請求依賴

只進行依賴注入而非初始化，不是進行真正的業務操作

做宣告參數使用，不做初始化的動作。

Providers

Angular的依賴注入(Dependency Injection, DI)方式之一 ，@NgModule裝飾器的提供者 (providers) 陣列內，在此定義的依賴對象則皆會被封裝至模型內。 (ex: Service、Interceptor、Guard)

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss'],
  providers: [AppService],
})

加入套件

1. 安裝bootstrap 至專案 或全域(-g) => npm install — save bootstrap@latest
   
   

2. 在”angular.json” 中修改css

   • 尋找angular.json
     

    

3. 修改styles，加入 “node_modules/bootstrap/dist/css/bootstrap.min.css”
   

結語

光是回頭看這第一篇的筆記，就要記起這麼海量的資訊真的快暈倒了＠＠，我想在紀錄筆記的時候，可能連“框架”是什麼的概念都沒有呢。

下面是在工作上留下的一些Angular快速指令，快速建立起基本的元件和之後會介紹的Router：

// 建立 module
ng generate module <path/module-name> [options]
ng g module <path/module-name> [options]

// 建立 module 並包含 routing
ng g module <path/module-name> --routing

// 建立 component
ng generate component <path/component-name> [options]
ng g component <path/component-name> [options]

// 建立 directive
ng generate directive <path/directive-name> [options]
ng g directive <path/directive-name> [options]

// 建立 enum
ng generate enum <path/enum-name> [options]
ng g enum <path/enum-name> [options]

// 建立 guard
ng generate guard <path/guard-name> [options]
ng g guard <path/guard-name> [options]

// 建立 interceptor
ng generate interceptor <path/interceptor-name> [options]
ng g interceptor <path/interceptor-name> [options]

// 建立 pipe
ng generate pipe <path/pipe-name> [options]
ng g pipe <path/pipe-name> [options]

// 建立 service
ng generate service <path/service-name> [options]
ng g service <path/service-name> [options]

// 建立 model，以下指令將產生 model-name.model.ts 檔案,並且不產生測試程式碼
ng generate class <path/model-name> --type model --skip-tests
ng g class <path/model-name> --type model --skip-tests