原文地址

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

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

安裝

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

當你使用 AngularJS Eclipse 更新站點安裝時，你會看見如下圖所示，當然，你也可以直接在 Eclipse的“market place”里輸入“angularjs”：

你必須選擇：

• AngularJS Eclipse Tooling，AngularJS Eclipse 插件。
• AngularJS support for JSP，如果你想使用帶 AngularJS 的 JSP，需要安裝這個。
• Tern - 內(nèi)置的 Node.js。如果你沒有單獨安裝 node.js 在你的機器上，那么執(zhí)行 tern.js 必需一個 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）前，你必須把你的項目轉(zhuǎn)換成 AngularJS 項目：

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

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

全局偏好（Global Preferences）

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

Node.js

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

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

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

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

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

項目偏好（Project preferences）

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

Tern Modules

Tern 模塊是一個 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 路徑

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

更多信息，請參考 Tern Script Path

自定義 Directives 語法

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

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

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

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

驗證你的配置后，Eclipse 會顯示該語法的指令名稱：

驗證

如果你有右鍵選擇你的頁面，點擊 "Validate" 菜單：

你會看到 AngularJS 指令有報警信息：

本例中，有兩個報警信息，就是那兩個嘆號：

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

你可以禁用無法識別屬性的報警信息，但是 AngularJS Eclipse 提供 "HTML Angular Syntax Validator"，它是 "HTML Syntax Validator" 的一個擴展，支持 Angular 指令。若想使用 Angular 驗證器，必須啟用它，并禁用"HTML Syntax Validator" :

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

Validation & JSP

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

繼續(xù)

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

HTML 編輯器

用標準的 WTP HTML，JSP 編輯器，打開一個 HTML 文件。

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

JavaScript 編輯器

打開一個 JavaScript 編輯器，嘗試自動打開 Angular 模塊：

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

排除故障

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

• Error log 視圖
• Tern 控制臺

Error log 視圖

Tern 控制臺

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

如下圖所示，必須先激活你項目的 tern console：

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

然后，打開 tern 控制臺：

如果你嘗試使用 tern 服務(wù)，自動提醒，你會看到如下報錯信息：

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

更多關(guān)于 tern 控制臺的信息，請參考 Tern Console。

Angular 瀏覽器

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

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

更多信息，請參考 Angular Explorer。

打開 Angular 元素

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