使用Angular CLI生成的項目結構解說

項目結構

 

組件，是整個應用的基礎。下圖是組件的必備元素。

• @Component：組件元數據裝飾器，簡稱裝飾器。裝飾器告訴Angular框架如何處理一個TypeScript類。裝飾器包含多個屬性，屬性的值叫作元數據。Angular會根據元數據的值渲染組件並執行組件的邏輯。
• 經過組件自帶的模板來定義組件的外觀。模板以HTML的形式存在，告訴Angular如何渲染組件。模板看起來很像HTML，可是能夠在模板中使用Angular的數據綁定語法，來呈現控制器中的數據。
• 控制器就是一個普通的Typescript類，它會被component這個裝飾器裝飾，控制器包含組件全部的屬性和方法，絕大多數的頁面邏輯都是寫在控制器裏的。控制器經過數據綁定與模板來通信：模板展示控制器的數據，控制器處理模板上發生的事件。

代碼講解

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

@Component({
  selector: 'app-root',//css選擇器的名稱，能夠在模板中使用。
  templateUrl: './app.component.html',//指向組件使用的模板文件
  styleUrls: ['./app.component.css']//指向組件用到的樣式文件
})
export class AppComponent { //AppComponent 是一個標準的typescript類
  title = 'app';
}

@Component能夠當作一個註解，註解了AppComponent類是一個組件。經過這個註解，Angular知道應該將AppComponent類看成一個組件來處理。

模塊

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [//聲明組件，管道和指令
    AppComponent,
  ],
  imports: [//引用的組件
    BrowserModule
    FormModule,
    HttpModule
  ],
  providers: [],//在這裏聲明服務
  bootstrap: [AppComponent]//聲明瞭模塊的主組件
})
export class AppModule { }

@NgModule()裝飾器

啓動Angular應用

啓動時加載了哪一個頁面？

啓動時加載了哪些腳本？

這些腳本作了什麼事？