Angular+WebAPI入門示例（一）

最近在學習Angular，對於一個初學者，大概花費了5天的時間，學習瞭解的angular項目的簡單創建，包括一些基礎問題的解決、路由、Http的配置使用等。

一、準備工作

1、項目需要實現的功能包括：用戶的登錄，用戶信息的增刪改查

2、創建一個WebAPI 項目，併發布運行，我使用的是VsCode+.NetCore+EF+SqlServer

3、創建一個angular項目

二、項目架構搭建

此處主要講angular項目的創建及開發，WebAPI在此處不做講解。

1、使用命令 ng new 創建一個名爲Angular的項目，使用VSCode打開該項目

項目結構如下圖

2、使用命令 npm install jquery 和npm install bootstrap 安裝jquery和bootstrap，命令執行後，會在node_modules文件加下出現jquery文件夾和bootstrap文件夾

3、打開angular.json文件，在styles和scripts配置bootstrap和jquery，主要是爲了全局樣式的配置

4、打開app.module.ts文件，從@angular/common/http 導入HttpClientModule，並將HttpClientModule 添加到imports中，此處是http的全局使用配置

5、使用命令 ng generate module app-routing --flat --module=app 生成路由文件，命令中的 --flat是把文件放在了src/app目錄下，--module=app是告訴CLI把它註冊到appmodule的imports數組中

6、在src/app文件夾下創建models(實體類)、service(服務)、components（組件）三個文件夾，然後使用命令 ng g c 創建login（登錄）、accountlist（列表）、accountedit（編輯）三個組件，使用命令 ng g cl 創建 account、msg、userinfo三個實體類，使用命令 ng g s 創建accountinfoservice服務

7、打開5中創建的路由文件，將代碼首先改成如下圖中的代碼

8、打開app.component.html文件，將內容清空，然後添加路由出口<router-outlet></router-outlet>，此時在login.html頁面中先簡單的放入幾個html 控件，用於查看效果。此時項目的結構爲

此時使用命令ng serve 啓動項目，會在瀏覽器中看到，啓動的頁面

到這裏，最初的項目搭建完成了