前面把基本環境搭建好了並且也創建了基礎項目，我們需要對目錄結構進行一個大致了解，在此可以查看angular中文官網的詳細介紹 https://angular.cn/guide/quickstart，其實只要大概過一遍就行，後面接觸慢慢了解，官網雖然寫更專業，但有時候感覺挺枯燥的，所以自己根據自己的理解和經驗把angular相關的都寫成筆記，目前來說angular的熱度感覺一直下降，更多的前端開發者和企業都更關註於vue和react等其它前端開發技術棧。寫angular筆記原因有三，一來怕長時間不用忘記，二來可以更加深入的了解angular，三來希望有更多的angular愛好者交流學習進步，個人覺得官方教程還是要多看，再結合網上分享的經驗可以讓自己更好的深入了解angular,後續自己的也會根據網上分享的angular技巧進行實踐，然後根據自己的理解形成筆記分享出來。開發angular，個人喜歡使用VSCode工具 https://code.visualstudio.com/ 。

現在除了對基礎項目的目錄了解後，我們還需了解下angular-cli相關的快捷命令 https://www.npmjs.com/package/@angular/cli ，我們常用的也就幾個，當然熟悉了，也可以自己手動創建，不需要命令也行，之前用過進入項目目錄，命令行運行ng serve --open ,現在簡單介紹下幾個：

ng serve --host 0.0.0.0 --port 4201

這裏沒有加 --open，當然也可以後面加,但要手動瀏覽器輸入地址，上面這命令是運行angular項目使用本地局域網ip（同等127.0.0.1），我的局域網ip 192.168.0.1,那麽瀏覽器就要輸入 http://192.168.0.101:4201/ 或者 http://127.0.0.1:4201/，如果不加 --port 4201,默認是是4200。每次都要這麽運行豈不是很麻煩？其實創建的基礎angular項目已經配置好了一些基本命令，打開package.json文件，有個 "start": "ng serve",我們也可以通過npm start來運行項目，為了方便，我們可以把此命令配置改成 "start": "ng serve --host 0.0.0.0 --port 4201 --open",我們還可以看看其它的，比如ng g component myheader,生成一個名叫myheader的組件，項目正在運行中，我們再vscode的工具新增一個命令行終端，之前是怎麽運行的呢？打開vscode工具，快捷鍵ctrl + ~ ,命令行輸入npm start，現在新增一個終端運行ng g component myheader

運行過後新增了myheader文件夾和相關文件

現在如何使用這個myheader組件呢？

這裏的myheader組件已經在app.module.ts中聲明了，如果自己手動創建的組件文件就要去app.module.ts中聲明，再來看看selector:‘app-myheader‘，簡單的可以認為相當於html的標簽，聲明以後可以任意地方的html文件中使用，當然這裏只是簡單打比方，現在把app.component.html的內容下加上<app-myheader></app-myheader>

碼雲：https://gitee.com/nicefree/angular/tree/master/ngtest

angular基礎筆記2