目錄
1、app.component.ts （骨架） -----組件中可以擁有自己的 DATA 和 methods選項
2、app.component.html -----管理組件視圖
3、app.component.css ------定義html的樣式，用來存放組件相關樣式
4、重新構建一個組件 ng generate component componentName
13、TypeScript = Type + EcmaScript6
1、app.component.ts （骨架） -----組件中可以擁有自己的 DATA 和 methods選項
import { Component } from '@angular/core';
// 在angular中，組件就是一個類(構造函數)
// @Component 組件的容器
// selector 用來定義組件渲染的標籤名稱，組件的名字
// templateUrl 管理組件視圖
// styleUrls 是一個數組，用來存放組件相關的樣式
// 組件中有自己的data 和methods選項
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'BayMax';
count = 0;
increament = function () {
// 在組件方法中，可以直接通過this 訪問組件成員
this.count++;
}
}
2、app.component.html -----管理組件視圖
<h1>
Welcome to {{ title }}!
</h1>
<h2>{{count}}</h2>
<!-- html 中 定義一個方法，方法來自於組件 app.component.ts-->
<button (click)="increament()">"點擊自增"</button>
3、app.component.css ------定義html的樣式，用來存放組件相關樣式
h1{
color: red;
}
h2{
color: aqua;
}
4、重新構建一個組件 ng generate component componentName
eg: ng generate component foo
執行完上述命令後，在src/app/foo 目錄下會自動生成 四個文件
UPDATE src/app/app.module.ts ---------app.module.ts 該文件被更新，
在該文件中，foo.component 組件被引入，同時在@NgModule 中 FooComponent 被聲明
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';
import { FooComponent } from './foo/foo.component'; // 新增加的 FooComponent 組件
@NgModule({
declarations: [
AppComponent,
FooComponent // 新增加的 FooComponent 組件
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5、 在app.component.html中進行引用
通過組件中 @Component 中的 selector: 'app-foo' ------app-foo 組件的名字進行引用
app.component.html
<h1>
Welcome to {{ title }}!
</h1>
<h2>{{count}}</h2>
<!-- html 中 定義一個方法，方法來自於組件 app.component.ts-->
<button (click)="increament()">"點擊自增"</button>
<app-foo></app-foo> <!--新追加的foo組件-->
6、模塊 modules
NgModule(模塊)是組織業務代碼的利器，按照業務場景，把組件、服務、路由打包到模塊裏面。形成一個個的積木塊，然後再利用這些積木塊在來搭建高樓大廈。
@NgModule({
// 組裝模塊資源：組件、指令、服務
declarations: [
AppComponent,
FooComponent // 新增加的 FooComponent 組件
],
imports: [ // 依賴模塊，該模塊依賴的模塊
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] // 指定啓動的根組件
})
export class AppModule { } // 將該模塊導出，可被其他模塊使用
7、模板 Templates
組件是用來封裝對視圖的操作的，而所謂的視圖也就是常說的HTML 模板。
可以進行數據綁定{{}}、雙向數據綁定[(ngModel)]、條件渲染、列表渲染、指令等。。。。。
8、元數據 Metadata
元數據告訴Angular如何處理組件類。
app.component.ts 中的 @Component（{}）給出了組件的名字、模板、樣式
該元數據描述了 AppComponent{} 組件的一些信息。
9、數據綁定 Data binding
MVVM思想（數據驅動視圖），通過特殊的{{}} 語法 將數據綁定到DOM元素，當數據改變的時候會影響視圖的更新。
10、指令 Directives
*ngFor 循環指令
*ngIf 條件判斷指令
[(ngModel)]表單控制雙向綁定指令
11、Services 服務
服務是一個廣義範疇，包括：值、函數、或應用所需的功能
服務就是針對某個單一或系統功能的封裝。 eg:HTTP服務
幾乎所有的東西都可以是一個服務。典型的服務是一個類，具有專注的、明確的用途。他應該做一件特定的事情，並把它做好。
12、依賴注入 Dependency injection
"依賴注入"是提供類的新實例的一種方式，還負責處理好類所需的全部依賴。大多數依賴都是服務。
Angular使用 依賴注入 來提供新組件以及組件所需的服務。
13、TypeScript = Type + EcmaScript6
TypeScript是JavaScript的超集，他和JavaScript不同，TypeScript這種強類型語言的最大優勢在於靜態類型檢查，可以在代碼開發階段就預知一些低級錯誤的發生。
tips
// .ts 表示是一個typescript文件,爲JavaScript聲明瞭類型
typescript是強類型，一旦定義了數據的類型，就不能動態修改，這樣在開發階段會避免掉很多麻煩。
14、ts文件怎麼執行
進入到ts文件所在的目錄 tsc .\xx.ts 會自動生成一個同名的js文件
15、typescript數據類型
let ：變量
const：常量
基本數據類型
布爾值 let flg:boolean = false;
數字 let amount:number = 0;
字符串 let str:string = 'hello';
數組 let arr:Array<number> = [1,2,3]; 或者 let arr:number[] = [1,2,3]
元組 x:[string,number]; x=['hello',1] 元組類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。
object 用的比較少。。。。--->interface
void 只能用於函數的返回值
null undefined,是所有類型的子類型。
16、for-of循環
forEach 不支持break
for in 會把數組當作對象來遍歷
for of 支持break -----遍歷數組常用