一、需要準備的環境

Nodejs：https://nodejs.org/en/download/

Python：https://www.python.org/downloads/release/python-370/

下載安裝版本，不需要用戶自己手動配置環境變量，環境安裝完成後如下圖（使用python - version）：

安裝Angular CLI，直接運行如下命令：

npm install -g @angular/cli

如果使用npm安裝失敗，可以使用淘寶的鏡像，先使用npm安裝cnpm，再安裝AngularCLI，使用如下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g @angular/cli

推薦使用VSCode作為編輯器，下載如下插件：

二、創建第一個項目

使用cmd進入到需要創建項目的文件夾，創建一個名為my-app的項目（時間大概8分鐘），使用如下命令行：

ng new my-app

創建完成後，進入到my-app文件夾下，安裝依賴，運行如下命令：

cnpm install

啟動服務，運行命令如下：

ng serve --open

在瀏覽器中http://localhost:4200/就可以看到如下的Angular默認界面：

三、項目文件目錄說明

項目目錄如下圖所示：

每個文件對應的作用如下表所示：

src文件夾下的目錄結構如下所示：

每個文件的作用如下表所示：

四、創建組件

在app文件夾下創建components文件夾，進入項目的根目錄，創建自定義組件，執行如下命令：

ng g component components/header

在項目目錄下可以看到新增組件文件，如下圖：

在app.component.html中使用app-header標簽即可引用自定義組件。（因為是使用AngularCLI創建組件，所有無需手動添加任何信息）

五、深入了解app.module.ts文件以及app.components.ts文件

1．@NgModule裝飾器將AppModule標記為Angular模塊類【NgModule類】

@NgModule接受一個元數據對象，告訴Angular如何編譯和啟動應用

2．declarations：表示引入當前項目運行的組件，自定義的組件都需要引入（import）並且在app.module.ts中引用，並且在declarations中配置。

3．Imports：表示當前的項目依賴哪些模塊

4．Providers：定義的服務放到這裏

5．Bootstrap：默認啟動哪個組件

6．Export class AppModule：根模塊不需要輸出任何東西

1．首先從argument核心引入Component

2．@Component中標明selector（組件的引用名稱），templateUrl（html），styleUrls（css）

3．export class AppComponent{}中主要用於定義數據

ps: 如果是新創建的組件，在export class **{}類實現了OnInit接口中，會有construct()構造函數，以及ngOnInit()生命周期函數（加載出發的函數）

初探AngularJs框架（一）