文檔半島外圍網(wǎng)上直營(yíng)>>IntelliJ IDEA系列教程：>>Java開(kāi)發(fā)平臺(tái)IntelliJ IDEA教程：AngularJS?

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

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

點(diǎn)擊下載IntelliJ IDEA最新版

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

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

在開(kāi)始之前，請(qǐng)確保您的計(jì)算機(jī)上有Node.js.

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

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

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

選擇文件| 新的| 從主菜單中選擇項(xiàng)目，或單擊歡迎屏幕上的新建項(xiàng)目按鈕。
在“ 項(xiàng)目類(lèi)別和選項(xiàng)”對(duì)話(huà)框（“ 新建項(xiàng)目”向?qū)У牡谝豁?yè)）中，在左側(cè)窗格中選擇“ 靜態(tài)Web ”。
在右側(cè)窗格中，選擇AngularJS，然后單擊Next。
在向?qū)У牡诙?yè)上，指定項(xiàng)目名稱(chēng)和要在其中創(chuàng)建的文件夾。
從版本列表中，選擇分支//github.com/angular/angular.js以從中下載項(xiàng)目模板。默認(rèn)情況下，master如果顯示。
單擊“完成”時(shí) IntelliJ IDEA 基于AngularJS種子項(xiàng)目生成包含所有必需配置文件的AngularJS特定項(xiàng)目結(jié)構(gòu)

要下載AngularJS依賴(lài)項(xiàng)，請(qǐng)執(zhí)行以下操作之一：

在嵌入式終端（Alt+F12）中，鍵入：
npm install
從項(xiàng)目根目錄中的package.json文件的上下文菜單中選擇Run'npm install'。
AngularJS依賴(lài)項(xiàng)包含AngularJS代碼以及支持開(kāi)發(fā)和測(cè)試的工具。

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

選擇文件| 新的| 從主菜單中選擇項(xiàng)目，或單擊歡迎屏幕上的新建項(xiàng)目按鈕。在“ 項(xiàng)目類(lèi)別和選項(xiàng)”對(duì)話(huà)框（“ 新建項(xiàng)目”向?qū)У牡谝豁?yè)）中，在左側(cè)窗格中選擇“ 靜態(tài)Web ”。
在右側(cè)窗格中，選擇Static Web，然后單擊Next。
在向?qū)У牡诙?yè)上，指定項(xiàng)目名稱(chēng)和要在其中創(chuàng)建的文件夾。
單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開(kāi)一個(gè)空項(xiàng)目。

手動(dòng)在空項(xiàng)目中安裝和配置AngularJS

下載AngularJS框架。
打開(kāi)您將使用AngularJS的空項(xiàng)目。
將AngularJS配置為IntelliJ IDEA JavaScript庫(kù)，讓IntelliJ IDEA識(shí)別AngularJS特定結(jié)構(gòu)并提供完整的編碼幫助：
在“ 設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 語(yǔ)言和框架”| JavaScript | 圖書(shū)館。將打開(kāi)“ JavaScript庫(kù)”頁(yè)面。
在“ 庫(kù)”區(qū)域中，單擊“ 添加”按鈕。
在打開(kāi)的“ 新建庫(kù)”對(duì)話(huà)框中，指定庫(kù)的名稱(chēng)。
單擊庫(kù)文件列表旁邊的，然后從上下文菜單中選擇“ 附加文件”或“ 附加目錄 ”，具體取決于您是需要單獨(dú)的文件還是整個(gè)文件夾。
選擇Angular.js或Angular.min.js，或打開(kāi)的對(duì)話(huà)框中的整個(gè)目錄。IntelliJ IDEA返回“ 新建庫(kù)”對(duì)話(huà)框，其中“ 名稱(chēng)”只讀字段顯示所選文件或文件夾的名稱(chēng)。
在“ 類(lèi)型”字段中，指定已下載并將要添加的版本。
如果添加了Angular.js，請(qǐng)選擇Debug。此版本在開(kāi)發(fā)環(huán)境中很有用，尤其適用于調(diào)試。
如果添加了縮小的 Angular.min.js，請(qǐng)選擇“ 釋放”。此版本在生產(chǎn)環(huán)境中很有用，因?yàn)槲募笮∫〉枚?。

通過(guò)Bower在空項(xiàng)目中安裝AngularJS

打開(kāi)您將使用AngularJS的空項(xiàng)目。
安裝 Bower
在嵌入式Terminal（Alt+F12）中，鍵入bower install angular以將程序包安裝為項(xiàng)目依賴(lài)項(xiàng)。
您還可以按照管理Bower軟件包中的說(shuō)明在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框的“ Bower”頁(yè)面 angular上安裝軟件包。

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

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