IntelliJ IDEA支持：Angular

Angular是用于構建跨平臺應用程序的流行框架。IntelliJ IDEA為Angular提供支持，并幫助您完成開發(fā)過程的每一步 - 從創(chuàng)建新的Angular應用程序到組件的調(diào)試和測試。

在開始使用Angular之前，你必須安裝Node.js。

創(chuàng)建一個新的Angular應用程序

您可以使用Angular CLI或創(chuàng)建一個空的IntelliJ IDEA項目并在其中安裝Angular。

Angular CLI是開始創(chuàng)建新Angular應用程序的推薦方法。Angular CLI應全局安裝，以便可以在任何IntelliJ IDEA項目中使用。

全局安裝Angular CLI

• 打開內(nèi)置的IntelliJ IDEA 終端（Alt+F12）并在命令提示符下鍵入

  npm install -g @angular/cli

創(chuàng)建應用程序

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。
2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲?，在左側窗格中選擇“靜態(tài)Web”。
3. 在右側窗格中，選擇AngularCLI，然后單擊“下一步”。
4. 在向?qū)У牡诙撋希付椖棵Q和要在其中創(chuàng)建的文件夾。在Node Interpreter字段中，指定要使用的Node.js解釋器。從下拉列表中選擇已配置的解釋器，或選擇“添加”以配置新的解釋器，在“Angular CLI”字段中，指定@angular/cli包的路徑。
5. 單擊“完成”后，IntelliJ IDEA將生成一個包含所有必需配置文件的Angular特定項目。

創(chuàng)建一個空的IntelliJ IDEA項目

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。
2. 在“項目類別和選項”對話框（“ 新建項目”向?qū)У牡谝豁摚┲校谧髠却案裰羞x擇“靜態(tài)Web”。
3. 在右側窗格中，選擇“靜態(tài)Web”，然后單擊“下一步”。
4. 在向?qū)У牡诙撋?，指定項目名稱和要在其中創(chuàng)建的文件夾。
5. 單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開一個空項目。

在空項目中安裝Angular

1. 打開您將使用Angular的空項目。
2. 打開嵌入式終端（查看|工具窗口|終端（View | Tool Windows | Terminal），或使用Alt+F12），并在命令提示符下鍵入“npm install @angular/core”。這將使用框架的關鍵運行時部分安裝核心Angular包。您可能還需要安裝Angular的其他軟件包。

從現(xiàn)有的Angular應用程序開始

要繼續(xù)開發(fā)現(xiàn)有的Angular應用程序，請在IntelliJ IDEA中打開它并下載所需的依賴項。

打開計算機上已有的應用程序源

• 單擊歡迎屏幕上的“打開”，或在主菜單上選擇：文件|打開。在打開的對話框中，選擇存儲源的文件夾。

從版本控制中檢出應用程序源

1. 單擊“歡迎”屏幕上的“從版本控制中簽出”，或從主菜單上選擇：VCS|從版本控制中簽出。
2. 從列表中選擇您的版本控制系統(tǒng)。
3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲庫以檢出應用程序源。

下載依賴項

• 單擊彈出窗口中的“運行'npm install'（Run 'npm install'）”：
  
  

使用ng add向Angular應用程序添加新功能

在使用Angular CLI 6或更高版本的項目中，您可以使用Angular Dependency操作添加新庫。此操作運行安裝依賴項的ng add命令，并使用特殊安裝腳本更新應用程序。請注意，并非所有庫都支持使用ng add安裝。

1. 在主菜單上選擇：文件|新建，或“項目”工具窗口按Alt+Insert，然后選擇“Angular依賴”。
2. 從列表中，選擇要添加的庫。該列表顯示了可以使用np add明確安裝的庫。要安裝不在列表中的軟件包，請滾動到其末尾，然后雙擊上面未列出的安裝軟件包鏈接，然后在打開的對話框中指定軟件包名稱。

   下面的示例說明了將Angular Material添加到項目中。
   

   

如果您通過package.json手動管理依賴項，IntelliJ IDEA仍會識別支持ng add的包。當您將這樣的包添加到package.json時，IntelliJ IDEA建議安裝它ng add。

如果已安裝此類依賴項，您可能仍希望使用ng add重新安裝它。在package.json文件中，選擇包的名稱，按Alt+Enter，然后單擊“使用ng add重新安裝”。

使用Angular Schematics生成代碼

在Angular CLI 6項目中，IntelliJ IDEA可以使用庫中定義的原理圖，如@angular/material和Angular CLI本身定義的原理圖生成代碼。對于早期版本，IntelliJ IDEA僅生成在Angular CLI中定義的組件，服務和其他藍圖。

1. 在主菜單上選擇：文件|新建，或在“項目”工具窗口上按Alt+Insert，然后選擇Angular Schematic。
2. 從列表中選擇相關的原理圖。
   
   
3. 在打開的對話框中，根據(jù)需要指定要生成的原理圖的名稱和其他選項。IntelliJ IDEA顯示原理圖的描述，并提供代碼完成和可用選項的描述。
   
   

使用Angular語言服務

IntelliJ IDEA與Angular團隊開發(fā)的Angular語言服務集成，以改進Angular-TypeScript項目的代碼分析和完成。請注意，Angular語言服務僅適用于使用Angular 2.3.1或更高版本以及與之兼容的TypeScript版本的項目。還要確保項目中有tsconfig.json文件。 

安裝@angular / language-service包

1. 打開嵌入式終端（查看|工具窗口|終端，或使用Alt+F12）。
2. 將當前文件夾更改為項目根目錄，然后在命令提示符下鍵入

   npm install @angular/language-service --save-dev

該Angular語言服務默認情況下處于激活狀態(tài)，因此IntelliJ IDEA會和TypeScript服務一起自動啟動它，并顯示所有的都在編輯器中，并在編輯器和TypeScript工具窗口中顯示你的TypeScript和HTML文件中的所有錯誤和警告。

切換服務的狀態(tài)

1. 在“設置/首選項”對話框（Ctrl+Alt+S）中，單擊“語言和框架”下的“文件夾 ”。將打開TypeScript頁面。
2. 選中TypeScript Language Service復選框，然后選中或清除Angular Language Service復選框。

使用Angular Material Design組件

IntelliJ IDEA識別Angular Material組件和屬性，并為它們提供編碼幫助：

• 完成組件
  
  
• 完成屬性
  
  
• 在組件或?qū)傩约捌渎暶鳎–trl+B，或上下文菜單上的“轉(zhuǎn)到|聲明”）之間導航。

安裝Angular Material

• 打開內(nèi)置的IntelliJ IDEA終端（Alt+F12）并在命令提示符下鍵入

  npm install --save @angular/material