本文章所有內容基于win10搭建Angular環境并運行hello-world

1. 相關

上一篇文章中我們了解Angular開發所需要準備的環境，我們搭建好環境之后不可能直接使用文本工具進行編程，必須選擇一款IDE，而一款好的IDE能讓我們開發起來事半功倍。我選擇的是JetBrains IDEA，主要原因是在我工作內容中的幾款編輯器，IDEA是支持Angular開發的做的比較好的一款IDE。

2. 新建項目

File => New => Project => JavaScript => Angular CLI

選擇下一步之后，就可以在里面配置我們的項目了。如果你從一開始跟著我進行到這一步，你就會發現IDEA已經將Node interpreter和Angular CLI都自動配置了，我們只需要設置我們的項目名即可。

點擊Finish之后就是等待構建完成了，當控制臺輸出以下內容，就代表著已成功構建

The file will have its original line endings in your working directorySuccessfully initialized git. Done

3. 在IDEA中運行項目

3.1. Show npm Script

在項目根目錄下找到pachage.json文件，右鍵選擇Show npm Script就會出現一個新的窗口

在這個窗口中就有一些我們常用的命令，其中start命令就相當于ng serve命令，雙擊start，項目就開始編譯并啟動，啟動完成控制臺輸出以下信息

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **√ Compiled successfully.

此時訪問http://localhost:4200/

npm中的命令其實都定義在package.json中，我們也可以自定義命令。
我們在package.json的scripts節點下新增

"node version": "node -v"

然后刷新npm界面就可以看到新增了一條node version命令，雙擊效果如執行node -v命令。

3.2. IDEA-RUN

在IDEA的最上方控制欄有可以直接運行項目的選項

我們可以選擇直接RUN或者是DEBUG的方式來運行項目，這里其實也是相當于執行

ng server

4. 從VCS中拉取項目

VCS => Get From Version Controll => 輸入地址

5. 總結

對于熟悉IDEA使用的同學來說，這里都不算很難，也可以自己去嘗試其他的用法。如果你是一個新手，可以關注我，后續文章會慢慢帶大家熟悉Angular語法和IDEA的用法
我是Baldwin，一個25歲的程序員，致力于讓學習變得更有趣！
現在關注作者即可領取海量學習資料與簡歷模板

往期好文：

用Python每天給女神發一句手機短信情話

MySQL優化之explain

Spring源碼分析-MVC初始化

春風得意馬蹄疾，一文看盡（JVM）虛擬機

造輪子的藝術

源碼閱讀技巧

Java注解詳解

教你自建SpringBoot服務器

更多文章請點擊

總結

以上是生活随笔為你收集整理的Angular------使用IDEA开发Angular的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。