文檔金喜正規(guī)買球>>IntelliJ IDEA系列教程：>>Java開發(fā)平臺(tái)IntelliJ IDEA教程：AngularJS?

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

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

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

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

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

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

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

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

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

選擇文件| 新的| 從主菜單中選擇項(xiàng)目，或單擊歡迎屏幕上的新建項(xiàng)目按鈕。
在“ 項(xiàng)目類別和選項(xiàng)”對(duì)話框（“ 新建項(xiàng)目”向?qū)У牡谝豁摚┲校谧髠?cè)窗格中選擇“ 靜態(tài)Web ”。
在右側(cè)窗格中，選擇AngularJS，然后單擊Next。
在向?qū)У牡诙撋希付?xià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依賴項(xiàng)，請(qǐng)執(zhí)行以下操作之一：

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

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

選擇文件| 新的| 從主菜單中選擇項(xiàng)目，或單擊歡迎屏幕上的新建項(xiàng)目按鈕。在“ 項(xiàng)目類別和選項(xiàng)”對(duì)話框（“ 新建項(xiàng)目”向?qū)У牡谝豁摚┲校谧髠?cè)窗格中選擇“ 靜態(tài)Web ”。
在右側(cè)窗格中，選擇Static Web，然后單擊Next。
在向?qū)У牡诙撋希付?xiàng)目名稱和要在其中創(chuàng)建的文件夾。
單擊“完成”后，IntelliJ IDEA將創(chuàng)建并打開一個(gè)空項(xiàng)目。

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

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

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

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

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

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