AngularJS Eclipse——新手入門【翻譯+整理】

原文地址

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

若是不單獨安裝 node.js 或使用 Eclipse 內置的 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 - 內置的 Node.js。若是你沒有單獨安裝 node.js 在你的機器上，那麼執行 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）前，你必須把你的項目轉換成 AngularJS 項目：

---

偏好設置（Preferences Settings）

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

全局偏好（Global Preferences）

在 Eclipse 的 Window/Preferences 對話框中設置。

Node.js

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

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

當選擇 native node 時，它會在默認文件夾搜索 node 可執行文件（例如：，對於 Widnows 操做系統，C:\Program Files\nodejs\node.exe），若是沒有找到，會嘗試在 PATH 環境變量中搜索。

注意：單獨安裝 node 後，使用 Angular JS Eclipse 前，最好重啓電腦，這是爲了讓操做系統正確更新你的 PATH 環境變量。

• 若使用內置的 node，你必須根據你的操做系統正確選擇內置的 node：

項目偏好（Project preferences）

接下來是設置「項目偏好」，右鍵選擇你的項目，點擊 Properties。

Tern Modules

Tern 模塊是一個 Tern 插件 或 JSON 類型定義。勾選「angular 插件」，以下圖所示：

angular 插件可讓你從你的 JavaScript 中檢索 module、controllers、(custom) directives 等等，管理 completion hyperlink、hover、validation in HTML 和 JavaScript editor。讓你模擬 angular 注入到你的 $scope、$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" :

若是從新驗證，你會發現 AngularJS 指令報警信息沒有了，可是沒法識別屬性報警仍是有的：

Validation & JSP

若是你使用 JSP，必須禁用 JSP Content Validator，並啓用 JSP Angular Content Validator。

---

繼續

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

HTML 編輯器

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

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

JavaScript 編輯器

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

這些功能是由 tern 管理的，若是不能正常工做，請參考 Troubleshooting 小節。

---

排除故障

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

• Error log 視圖
• Tern 控制檯

Error log 視圖

Tern 控制檯

你能夠經過 Eclipse 控制檯，追蹤 node.js 和 tern 的 request/response。

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

注意，激活 tern 控制檯的選項，在你的 Eclipse 上，能夠爲之不一樣。跟上圖不太同樣，不在 console 選項中，而是在 development 裏。

而後，打開 tern 控制檯：

若是你嘗試使用 tern 服務，自動提醒，你會看到以下報錯信息：

當一切沒有後，你會看到 tern 服務的 JSON request/response of the tern server。以下所示：

更多關於 tern 控制檯的信息，請參考 Tern Console。

Angular 瀏覽器

Angular 瀏覽器視圖能夠顯示 Angular 元素，好比你 AngularJS 應用程序的模塊和控制器。若想打開它，點擊 Eclipse 的  Window/Show View，並選擇 Angular Explorer :

以後，你能夠看到你的模塊、控制器等等：

更多信息，請參考 Angular Explorer。

打開 Angular 元素

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