IntelliJ IDEA與AngularJS框架集成

AngularJS

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

IntelliJ IDEA與AngularJS框架（也稱為Angular 1）集成， 用于開發(fā)單頁Web應(yīng)用程序。IntelliJ IDEA為預(yù)定義和自定義ng指令以及控制器和應(yīng)用程序名稱提供了AngularJS感知的完成選項，以及大括號表達(dá)式{{}}內(nèi)的數(shù)據(jù)綁定提供了代碼洞察力。您可以使用內(nèi)置的AngularJS live模板和HTML中的控制器的名稱和它在JavaScript中的定義之間導(dǎo)航，或者在ngView或&routeProvider和模板之間導(dǎo)航。對于AngularJS實體，使用Go To符號導(dǎo)航。

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

您可以使用 AngularJS 種子項目, 或者創(chuàng)建一個空的 IntelliJ 想法項目, 并通過下載 AngularJS 框架或與鮑爾軟件包管理器進(jìn)行手動安裝 AngularJS。

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

使用seed項目創(chuàng)建應(yīng)用程序：

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。
2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web ”。
3. 在右側(cè)窗格中，選擇AngularJS，然后單擊“下一步”。
4. 在向?qū)У牡诙撋希付椖棵Q和要在其中創(chuàng)建的文件夾。

   從Version下拉列表中，選擇分支https://github.com/angular/angular.js以從中下載項目模板。默認(rèn)情況下，顯示為master形狀。

5. 單擊“完成”后，IntelliJ IDEA將生成AngularJS特定的項目結(jié)構(gòu)，其中包含基于AngularJS seed項目的所有必需配置文件

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

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

• 打開嵌入式終端（查看|工具窗口|終端，或按Alt+F12）并在命令提示符下鍵入：npm install。
• 在項目根目錄中的package.json文件的上下文菜單中選擇：Run'npm install'。

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

1. 在主菜單上選擇：文件|新建|項目，或單擊歡迎屏幕上的“新建項目”按鈕。
2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web”。
3. 在右側(cè)窗格中，選擇“靜態(tài)Web”，然后單擊“下一步”。
4. 在向?qū)У牡诙撋希付椖棵Q和要在其中創(chuàng)建的文件夾。
5. 單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開一個空項目。

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

1. 在http://angularjs.org/下載AngularJS框架。
2. 打開將使用AngularJS的空項目。
3. 將AngularJS配置為IntelliJ IDEA JavaScript庫，讓IntelliJ IDEA識別AngularJS特定結(jié)構(gòu)并提供完整的編碼幫助：
1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“JavaScript庫”。
2. 在“庫”區(qū)域中，單擊“添加”按鈕。
3. 在打開的“新建庫”對話框中，指定庫的名稱。
4. 單擊庫文件列表旁邊的“添加”按鈕 ，然后在上下文菜單中選擇“附加文件”或“附加目錄”，具體取決于您是需要單獨的文件還是整個文件夾。
5. 在打開的對話框中選擇Angular.js或Angular.min.js，或整個目錄。IntelliJ IDEA返回“新建庫”對話框，其中“Name”只讀字段顯示所選文件或文件夾的名稱。
6. 在“Type”字段中，指定已下載并將要添加的版本。
• 如果添加Angular.js，請選擇“調(diào)試”。此版本在開發(fā)環(huán)境中很有用，尤其適用于調(diào)試。
• 如果添加了minified Angular.min.js，請選擇Release。此版本在生產(chǎn)環(huán)境中很有用，因為文件大小要小得多。

通過Bower在空項目中安裝AngularJS：

1. 打開將使用AngularJS的空項目。
2. 如“Bower”一節(jié)中所述方式安裝Bower。
3. 打開嵌入式終端（查看|工具窗口|終端，或按Alt+F12），并在命令提示符下鍵入：bower install angular，以將程序包安裝為項目依賴項。

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

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

從版本控制中檢出應(yīng)用程序源：

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

下載依賴項：

• 單擊彈出窗口中的：Run 'npm install'：
  
  

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

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

生成和查看圖表：

• 在編輯器中打開所需的文件，然后在上下文菜單中選擇：Diagrams|顯示AngularJS ui-router狀態(tài)圖。IntelliJ IDEA生成一個圖表并在單獨的編輯器選項卡中顯示。

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

• 選擇它，然后在上下文菜單中選擇“跳轉(zhuǎn)到源”。