原文地址

本文介紹如何安裝和配置 AngularJS Eclipse。AngularJS Eclipse 插件是基于強(qiáng)大的 JavaScript 推斷引擎（javascript inference engine）Tern.js， 它由 JavaScript 編寫。若在 java 環(huán)境下使用該引擎，需要使用 tern.java。它用 node.js 執(zhí)行 tern.js。這就是為什么你在下面將看到的必須安裝 node.js 或是 Eclipse 內(nèi)置的 node.js。

如果不單獨(dú)安裝 node.js 或使用 Eclipse 內(nèi)置的 node.js，那么在 HTML 編輯器里只有語法顏色（syntax coloring）和自動(dòng)完成指令（completions directives）可用。

安裝

AngularJS Eclipse 推薦使用 Eclipse JEE 4.5 (Mars)版本，及以上。

當(dāng)你使用 AngularJS Eclipse 更新站點(diǎn)安裝時(shí)，你會(huì)看見如下圖所示，當(dāng)然，你也可以直接在 Eclipse的“market place”里輸入“angularjs”：

你必須選擇：

• AngularJS Eclipse Tooling，AngularJS Eclipse 插件。
• AngularJS support for JSP，如果你想使用帶 AngularJS 的 JSP，需要安裝這個(gè)。
• Tern - 內(nèi)置的 Node.js。如果你沒有單獨(dú)安裝 node.js 在你的機(jī)器上，那么執(zhí)行 tern.js 必需一個(gè) Node.js。
• Tern IDE。用于 Eclipse IDE 使用 tern。
• Tern - Tooling。生成 tern 插件、JSON Type 定義或 Web Browser editor（CodeMirror, Ace, Orion）的工具。更多信息，參見 Tern Toolings

AngularJS 配置

使用 AngularJS Eclipse 功能（HTML features 和 JavaScript features）前，你必須把你的項(xiàng)目轉(zhuǎn)換成 AngularJS 項(xiàng)目：

偏好設(shè)置（Preferences Settings）

下面說明如何配置 tern 和 angular。

全局偏好（Global Preferences）

在 Eclipse 的 Window/Preferences 對(duì)話框中設(shè)置。

Node.js

AngularJS Eclipse 基于 javascript 推斷引擎——tern.js。若想使用它，需要用 node.js（Rhino 有點(diǎn)慢）。配置 node.js 如下所示：

• 若你已經(jīng)單獨(dú)安裝的 node.js，需要選擇 Native node 安裝類型，以及 nodejs 在你機(jī)器上的安裝路徑：

當(dāng)選擇 native node 時(shí)，它會(huì)在默認(rèn)文件夾搜索 node 可執(zhí)行文件（例如：，對(duì)于 Widnows 操作系統(tǒng)，C:\Program Files\nodejs\node.exe），如果沒有找到，會(huì)嘗試在 PATH 環(huán)境變量中搜索。

注意：?jiǎn)为?dú)安裝 node 后，使用 Angular JS Eclipse 前，最好重啟電腦，這是為了讓操作系統(tǒng)正確更新你的 PATH 環(huán)境變量。

• 若使用內(nèi)置的 node，你必須根據(jù)你的操作系統(tǒng)正確選擇內(nèi)置的 node：

項(xiàng)目偏好（Project preferences）

接下來是設(shè)置“項(xiàng)目偏好”，右鍵選擇你的項(xiàng)目，點(diǎn)擊 Properties。

Tern Modules

Tern 模塊是一個(gè) Tern 插件 或 JSON 類型定義。勾選“angular 插件”，如下圖所示：

angular 插件可以讓你從你的 JavaScript 中檢索 module、controllers、(custom) directives 等等，管理 completion hyperlink、hover、validation in HTML 和 JavaScript editor。讓你模擬 angular 注入到你的 、http 等等。

You can select other tern module like jQuery for instance to benefit with jQuery completion inside JavaScript Editor.

Scripts 路徑

當(dāng)你使用 tern 用于 completion、validation、hover、hyperlink 時(shí)，必須加載你的 JavaScript，但只在第一次。因此，你必須配置腳本路徑，把你 JavaScript 文件夾添加進(jìn)去（這類似 Java build path）：

更多信息，請(qǐng)參考 Tern Script Path

自定義 Directives 語法

在 HTML 編輯器里，用 ng-* 語法提供指令名字：

注意，自動(dòng)提醒，文檔中寫的快捷鍵是 ctrl+space，但在我的 Eclipse 里是，alt+/

Angular 支持很多語法，比如以 'x-'、'data-' 開頭，使用':'、'-'、'_' 分隔。你也可以自定義。默認(rèn)情況下，你會(huì)看到如下配置：

你可以選擇其他開頭和分隔的語法。在多行文本框，你會(huì)看到：

驗(yàn)證你的配置后，Eclipse 會(huì)顯示該語法的指令名稱：

驗(yàn)證

如果你有右鍵選擇你的頁面，點(diǎn)擊 "Validate" 菜單：

你會(huì)看到 AngularJS 指令有報(bào)警信息：

本例中，有兩個(gè)報(bào)警信息，就是那兩個(gè)嘆號(hào)：

• ng-app 是一個(gè) Angular 指令
• head 元素的  "a" 屬性不存在

你可以禁用無法識(shí)別屬性的報(bào)警信息，但是 AngularJS Eclipse 提供 "HTML Angular Syntax Validator"，它是 "HTML Syntax Validator" 的一個(gè)擴(kuò)展，支持 Angular 指令。若想使用 Angular 驗(yàn)證器，必須啟用它，并禁用"HTML Syntax Validator" :

如果重新驗(yàn)證，你會(huì)發(fā)現(xiàn) AngularJS 指令報(bào)警信息沒有了，但是無法識(shí)別屬性報(bào)警還是有的：

Validation & JSP

如果你使用 JSP，必須禁用 JSP Content Validator，并啟用 JSP Angular Content Validator。

繼續(xù)

自此，AngularJS Eclipse 配置完成，接下來檢查是否一切正常（tern 是否正確配置）。

HTML 編輯器

用標(biāo)準(zhǔn)的 WTP HTML，JSP 編輯器，打開一個(gè) HTML 文件。

試著在 ng-app 上自動(dòng)打開你的模塊：

JavaScript 編輯器

打開一個(gè) JavaScript 編輯器，嘗試自動(dòng)打開 Angular 模塊：

這些功能是由 tern 管理的，如果不能正常工作，請(qǐng)參考 Troubleshooting 小節(jié)。

排除故障

如果 HTML 和 JavaScript 編輯器不能像上面那樣自動(dòng)提示，意味著 tern 沒有配置好。用下面方式檢查一下錯(cuò)誤：

• Error log 視圖
• Tern 控制臺(tái)

Error log 視圖

Tern 控制臺(tái)

你可以通過 Eclipse 控制臺(tái)，追蹤 node.js 和 tern 的 request/response。

如下圖所示，必須先激活你項(xiàng)目的 tern console：

注意，激活 tern 控制臺(tái)的選項(xiàng)，在你的 Eclipse 上，可以為之不同。跟上圖不太一樣，不在 console 選項(xiàng)中，而是在 development 里。

然后，打開 tern 控制臺(tái)：

如果你嘗試使用 tern 服務(wù)，自動(dòng)提醒，你會(huì)看到如下報(bào)錯(cuò)信息：

當(dāng)一切沒有后，你會(huì)看到 tern 服務(wù)的 JSON request/response of the tern server。如下所示：

更多關(guān)于 tern 控制臺(tái)的信息，請(qǐng)參考 Tern Console。

Angular 瀏覽器

Angular 瀏覽器視圖可以顯示 Angular 元素，比如你 AngularJS 應(yīng)用程序的模塊和控制器。若想打開它，點(diǎn)擊 Eclipse 的  Window/Show View，并選擇 Angular Explorer :

之后，你可以看到你的模塊、控制器等等：

更多信息，請(qǐng)參考 Angular Explorer。

打開 Angular 元素

當(dāng)你要編輯 JavaScript 或是 HTML 文件時(shí)，可以用 Angular 元素對(duì)話框檢索和打開 angular 元素，位于 Eclipse 的 Navigate/Open Angular Element，像 module、controller、directives 等，或直接按快捷鍵 Ctrl+Shift+Z：