Java開發(fā)平臺IntelliJ IDEA教程：AngularJS?

IntelliJ IDEA是Java語言開發(fā)的集成環(huán)境，IntelliJ在業(yè)界被公認為優(yōu)秀的Java開發(fā)工具之一，尤其在智能代碼助手、代碼自動提示、重構、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創(chuàng)新的GUI設計等方面的功能可以說是超常的。

點擊下載IntelliJ IDEA最新版

此功能僅在Ultimate版本中受支持。

AngularJS也稱為Angular 1， 是用于開發(fā)單頁Web應用程序的框架。IntelliJ IDEA為預定義和自定義ng指令以及控制器和應用程序名稱提供了AngularJS感知的完成選項，以及大括號表達式內數(shù)據(jù)綁定的代碼洞察{{}}。您可以使用內置的AngularJS生活模板和HTML中的控制器的名稱和它在JavaScript或之間定義之間導航ngView或&routeProvider和模板。對于AngularJS實體，請使用“ 轉到符號”導航。

在開始之前，請確保您的計算機上有Node.js.

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

您可以使用AngularJS種子項目或創(chuàng)建一個空的IntelliJ IDEA項目，并通過下載AngularJS框架或Bower包管理器手動安裝AngularJS。

使用種子項目創(chuàng)建應用程序

1. 選擇文件| 新的| 從主菜單中選擇項目，或單擊歡迎屏幕上的新建項目按鈕。

2. 在“ 項目類別和選項”對話框（“ 新建項目”向導的第一頁）中，在左側窗格中選擇“ 靜態(tài)Web ”。

3. 在右側窗格中，選擇AngularJS，然后單擊Next。

4. 在向導的第二頁上，指定項目名稱和要在其中創(chuàng)建的文件夾。

5. 從版本列表中，選擇分支https://github.com/angular/angular.js以從中下載項目模板。默認情況下，master如果顯示。

6. 單擊“完成”時 IntelliJ IDEA 基于AngularJS種子項目生成包含所有必需配置文件的AngularJS特定項目結構

要下載AngularJS依賴項，請執(zhí)行以下操作之一：

1. 在嵌入式終端（Alt+F12）中，鍵入：

2. npm install

3. 從項目根目錄中的package.json文件的上下文菜單中 選擇Run'npm install'。 

4. AngularJS依賴項包含AngularJS代碼以及支持開發(fā)和測試的工具。

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

1. 選擇文件| 新的| 從主菜單中選擇項目，或單擊歡迎屏幕上的新建項目按鈕。在“ 項目類別和選項”對話框（“ 新建項目”向導的第一頁）中，在左側窗格中選擇“ 靜態(tài)Web ”。

2. 在右側窗格中，選擇Static Web，然后單擊Next。

3. 在向導的第二頁上，指定項目名稱和要在其中創(chuàng)建的文件夾。

4. 單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開一個空項目。

手動在空項目中安裝和配置AngularJS 

1. 下載AngularJS框架。

2. 打開您將使用AngularJS的空項目。

3. 將AngularJS配置為IntelliJ IDEA JavaScript庫，讓IntelliJ IDEA識別AngularJS特定結構并提供完整的編碼幫助：

4. 在“ 設置/首選項”對話框（Ctrl+Alt+S）中，轉到“ 語言和框架”| JavaScript | 圖書館。將打開“ JavaScript庫”頁面。

5. 在“ 庫”區(qū)域中，單擊“ 添加”按鈕。

6. 在打開的“ 新建庫”對話框中，指定庫的名稱。

7. 單擊庫文件列表旁邊的，然后 從上下文菜單中選擇“ 附加文件”或“ 附加目錄 ”，具體取決于您是需要單獨的文件還是整個文件夾。

8. 選擇Angular.js或Angular.min.js，或打開的對話框中的整個目錄。IntelliJ IDEA返回“ 新建庫”對話框，其中“ 名稱”只讀字段顯示所選文件或文件夾的名稱。

9. 在“ 類型”字段中，指定已下載并將要添加的版本。

10. 如果添加了Angular.js，請選擇Debug。此版本在開發(fā)環(huán)境中很有用，尤其適用于調試。

11. 如果添加了縮小的 Angular.min.js，請選擇“ 釋放”。此版本在生產(chǎn)環(huán)境中很有用，因為文件大小要小得多。

通過Bower在空項目中安裝AngularJS 

1. 打開您將使用AngularJS的空項目。

2. 安裝 Bower

3. 在嵌入式Terminal（Alt+F12）中，鍵入bower install angular以將程序包安裝為項目依賴項。

4. 您還可以按照管理Bower軟件包中的說明在“設置/首選項”對話框 的“ Bower”頁面 angular上安裝軟件包。

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

如果您的項目中已經(jīng)有Angular源（例如，在bower_components 文件夾中），只需打開項目并開始工作。如果從項目中排除這些源，則只需將AngularJS配置為JavaScript庫。

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

1. 單擊“ 歡迎”屏幕上的“ 從版本控制中簽出”或選擇“ VCS” 從主菜單中查看版本控制。

2. 從列表中選擇您的版本控制系統(tǒng)。

3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲庫以檢出應用程序源。

下載依賴項

單擊彈出窗口中的“運行'npm install'：

使用AngularJS路由器狀態(tài)圖

您可以看到一個圖表，說明使用ui-router的AngularJS應用程序中的視圖，狀態(tài)和模板之間的關系 。

生成和查看圖表

在編輯器中打開所需的文件，然后選擇 Diagrams | 從上下文菜單中顯示AngularJS ui-router State Diagram。IntelliJ IDEA生成一個圖表并在單獨的編輯器選項卡中顯示。

從圖中的元素導航到實現(xiàn)此元素的代碼

選擇它并從上下文菜單中選擇Jump to Source。

相關閱讀推薦：

IntelliJ IDEA最新版本2019.2全面解析，Java 13預覽等多項新功能上線 （上）

IntelliJ IDEA最新版本2019.2全面解析，Java 13預覽等多項新功能上線 （下）

=====================================================

想要購買IntelliJ IDEA正版授權的朋友可以咨詢慧都官方客服。