今天去上了保哥的Angular 4 開發實戰：新手入門篇，學到不少新東西，趁著記憶猶新的時候趕快記錄下來，也可以複習一次今天上課的內容。
我的學習流程大致上是 能跑>能改>開始理解
有表示不清楚，或是錯誤的地方再麻煩各位朋友指正或是與我分享囉。
專案範本建立完成後有幾個檔案
app.module.ts、app.component.ts、app.component.html、app.component.css
其中最為重要的是app.module.ts，裡面的AppComponent以及相關的import，都是載入app元件的基本配備
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 { }
注意檔案結尾的ts，這代表這份檔案是使用TypeScript撰寫的，簡單來說能使JS有強型別、預先編譯、可套物件導向的概念進入其中。
再來看看app.component.ts
selector的app-root是在應用程式中的變數名稱，也就是說可以在Html之中，用<app-root></app-root>這種語法，把這個元件載入。
templateUrl就是要載入的html檔案
styleUrls即是載入的css檔案
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
alert('HI');
}
}
由於TS有著類的概念在其中，因此我們可以使用類的建構子constructor，在這邊我寫了載入這支JS檔案，就會跳出HI的效果。
目前在這邊理解到NG的概念就是
1.由app.module.ts控制程式的生命週期
2.NG透過建立元件寫入HTML之中，也因為有了元件的概念，網頁的部分更方便的做抽換
歡迎您的加入，讓這個社群更加美好！