AngularJS Eclipse——新手入门【翻译+整理】

Love The Way You Lie 2022-06-04 00:57 159阅读 0赞

[原文地址][Link 1]

本文介绍如何安装和配置 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”：

[![thupdatesite][]][thupdatesite 1]

你必须选择：

*  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 项目：

[![gularproject][]][gularproject 1]

--------------------

# 偏好设置（Preferences Settings） #

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

## 全局偏好（Global Preferences） ##

在 Eclipse 的 Window/Preferences 对话框中设置。

### Node.js ###

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

*  若你已经单独安装的 [node.js][]，需要选择 Native node 安装类型，以及 nodejs 在你机器上的安装路径：

[![onnativenode][]][onnativenode 1]

当选择 native node 时，它会在默认文件夹搜索 node 可执行文件（例如：，对于 Widnows 操作系统，C:\\Program Files\\nodejs\\node.exe），如果没有找到，会尝试在 PATH 环境变量中搜索。

注意：单独安装 node 后，使用 Angular JS Eclipse 前，最好重启电脑，这是为了让操作系统正确更新你的 PATH 环境变量。

*  若使用内置的 node，你必须根据你的操作系统正确选择内置的 node：

[![ionembednode][]][ionembednode 1]

## 项目偏好（Project preferences） ##

接下来是设置“项目偏好”，右键选择你的项目，点击 Properties。

### Tern Modules ###

Tern 模块是一个 [Tern 插件][Tern] 或 [JSON 类型定义][JSON]。勾选“angular 插件”，如下图所示：

![Tern Plugin][]

angular 插件可以让你从你的 JavaScript 中检索 module、controllers、(custom) directives 等等，管理 completion hyperlink、hover、validation in HTML 和 JavaScript editor。让你模拟 angular 注入到你的 ![0073.png_rev_2.6.1][]![0063.png_rev_2.6.1][]![006F.png_rev_2.6.1][]![0070.png_rev_2.6.1][]![0065.png_rev_2.6.1][]、 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）：

[![onfiguration\[1\]][onfiguration_1]][onfiguration_1_onfiguration_1]

更多信息，请参考 [Tern Script Path][]

### 自定义 Directives 语法 ###

在 HTML 编辑器里，用 ng-\* 语法提供指令名字：

[![redirective1][]][redirective1 1]

注意，自动提醒，文档中写的快捷键是 ctrl+space，但在我的 Eclipse 里是，alt+/

Angular 支持很多语法，比如以 'x-'、'data-' 开头，使用':'、'-'、'\_' 分隔。你也可以自定义。默认情况下，你会看到如下配置：

[![redirective2][]][redirective2 1]

你可以选择其他开头和分隔的语法。在多行文本框，你会看到：

[![redirective3][]][redirective3 1]

验证你的配置后，Eclipse 会显示该语法的指令名称：

[![redirective4][]][redirective4 1]

--------------------

# 验证 #

如果你有右键选择你的页面，点击 "Validate" 菜单：

[![atorvalidate][]][atorvalidate 1]

你会看到 AngularJS 指令有报警信息：

[![arndirective][]][arndirective 1]

本例中，有两个报警信息，就是那两个叹号：

*  ng-app 是一个 Angular 指令
 *  head 元素的  "a" 属性不存在

你可以禁用无法识别属性的报警信息，但是 AngularJS Eclipse 提供 "HTML Angular Syntax Validator"，它是 "HTML Syntax Validator" 的一个扩展，支持 Angular 指令。若想使用 Angular 验证器，必须启用它，并禁用"HTML Syntax Validator" :

[![oruseangular][]][oruseangular 1]

如果重新验证，你会发现 AngularJS 指令报警信息没有了，但是无法识别属性报警还是有的：

[![nunknownattr][]][nunknownattr 1]

## Validation & JSP ##

如果你使用 JSP，必须禁用 JSP Content Validator，并启用 JSP Angular Content Validator。

--------------------

# 继续 #

自此，AngularJS Eclipse 配置完成，接下来检查是否一切正常（tern 是否正确配置）。

## HTML 编辑器 ##

用标准的 WTP HTML，JSP 编辑器，打开一个 HTML 文件。

试着在 ng-app 上自动打开你的模块：

[![ularjseditor][]][ularjseditor 1]

## JavaScript 编辑器 ##

打开一个 JavaScript 编辑器，尝试自动打开 Angular 模块：

[![jseditor][]][jseditor 1]

这些功能是由 tern 管理的，如果不能正常工作，请参考 [Troubleshooting][] 小节。

--------------------

# 排除故障 #

如果 HTML 和 JavaScript 编辑器不能像上面那样自动提示，意味着 tern 没有配置好。用下面方式检查一下错误：

*  Error log 视图
 *  Tern 控制台

## Error log 视图 ##

[![ternerrorlog][]][ternerrorlog 1]

## Tern 控制台 ##

你可以通过 Eclipse 控制台，追踪 node.js 和 tern 的 request/response。

如下图所示，必须先激活你项目的 tern console：

[![ctproperties][]][ctproperties 1]

注意，激活 tern 控制台的选项，在你的 Eclipse 上，可以为之不同。跟上图不太一样，不在 console 选项中，而是在 development 里。

然后，打开 tern 控制台：

[![nconsoleopen][]][nconsoleopen 1]

如果你尝试使用 tern 服务，自动提醒，你会看到如下报错信息：

[![consoleerror][]][consoleerror 1]

当一切没有后，你会看到 tern 服务的 JSON request/response of the tern server。如下所示：

[![ernconsoleok][]][ernconsoleok 1]

更多关于 tern 控制台的信息，请参考 [Tern Console][]。

# Angular 浏览器 #

Angular 浏览器视图可以显示 Angular 元素，比如你 AngularJS 应用程序的模块和控制器。若想打开它，点击 Eclipse 的  Window/Show View，并选择 Angular Explorer :

[![ularexplorer][]][ularexplorer 1]

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

[![ularexplorer\[1\]][ularexplorer_1]][ularexplorer_1_ularexplorer_1]

更多信息，请参考 [Angular Explorer][]。

## 打开 Angular 元素 ##

当你要编辑 JavaScript 或是 HTML 文件时，可以用 Angular 元素对话框检索和打开 angular 元素，位于 Eclipse 的 Navigate/Open Angular Element，像 module、controller、directives 等，或直接按快捷键 `Ctrl+Shift+Z`：

[![gularelement][]][gularelement 1]

[Link 1]: https://github.com/angelozerr/angularjs-eclipse
[Tern.js]: http://ternjs.net/
[tern.java]: https://github.com/angelozerr/tern.java
[node.js]: http://nodejs.org/
[thupdatesite]: /images/20220604/51d0b377e56048a9a4a2ca21d7948281.png
[thupdatesite 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223107582-334347087.png
[Tern Toolings]: https://github.com/angelozerr/tern.java/wiki/Tern-Toolings
[HTML features]: https://github.com/angelozerr/angularjs-eclipse/wiki/HTML-Features
[JavaScript features]: https://github.com/angelozerr/angularjs-eclipse/wiki/JavaScript-Features
[gularproject]: /images/20220604/f5615c52946c4fbbb08566a3e60be5b9.png
[gularproject 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223109098-135877649.png
[onnativenode]: /images/20220604/b7c884212657447da0d1750f20525e77.png
[onnativenode 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223110723-1198763232.png
[ionembednode]: /images/20220604/1c778562c1b94ec59c3aa8f5b11af7f9.png
[ionembednode 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223115379-879748079.png
[Tern]: http://ternjs.net/doc/manual.html#plugins
[JSON]: http://ternjs.net/doc/manual.html#typedef
[Tern Plugin]: https://github.com/angelozerr/angularjs-eclipse/wiki/images/TernPluginConfiguration.png
[0073.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/400/0073.png?rev=2.6.1
[0063.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/400/0063.png?rev=2.6.1
[006F.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/400/006F.png?rev=2.6.1
[0070.png_rev_2.6.1]: http://mathjax.cnblogs.com/2_6_1/fonts/HTML-CSS/TeX/png/Math/Italic/400/0070.png?rev=2.6.1
[0065.png_rev_2.6.1]: /images/20220604/7b6ee588984a4cdd90617aca627f93f5.png
[onfiguration_1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223119019-969777213.png
[onfiguration_1_onfiguration_1]: /images/20220604/a4a0ed808b7d48efb744fe412b54b089.png
[Tern Script Path]: https://github.com/angelozerr/tern.java/wiki/Tern-Script-Path
[redirective1]: /images/20220604/9475866f5cc64501937c3ddaeedcb9cd.png
[redirective1 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223119519-892327614.png
[redirective2]: /images/20220604/ddae1417dc6b4dc48fea33f4a6066445.png
[redirective2 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223121066-1262537104.png
[redirective3]: /images/20220604/812d0c8f72514f94b7b69a4450a6c656.png
[redirective3 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223122410-969978495.png
[redirective4]: /images/20220604/4818ac103ac04179bb7ac6772371dbfa.png
[redirective4 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223123848-80493853.png
[atorvalidate]: /images/20220604/510743c298cb4618929f160cdd1cb6fc.png
[atorvalidate 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223128223-1697634623.png
[arndirective]: /images/20220604/17cc90e53ce943ce9d193da8720a5bf8.png
[arndirective 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223129426-1191215067.png
[oruseangular]: /images/20220604/dc026d0b7fe54b4d8031871bf8038b07.png
[oruseangular 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223130629-571316190.png
[nunknownattr]: /images/20220604/26e61781c42d4b768a0fb710b64cf614.png
[nunknownattr 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223132066-616531425.png
[ularjseditor]: /images/20220604/66c0c4df0da144b0b6fcab456b3ee5e9.png
[ularjseditor 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223133207-2087387222.png
[jseditor]: /images/20220604/a1dc6088d2e24ec5ad50c97b23ffb7e0.png
[jseditor 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223137504-1246116639.png
[Troubleshooting]: https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started#wiki-troubleshooting
[ternerrorlog]: /images/20220604/068cc062416b401f8b2ce02d67b8a8e7.png
[ternerrorlog 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223138660-1111119389.png
[ctproperties]: /images/20220604/54bed3aac9dd45ecb334e5e5f6969bb4.png
[ctproperties 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223142738-1654080046.png
[nconsoleopen]: /images/20220604/7df48507e36d45dc9f91a6ec8dee9cfe.png
[nconsoleopen 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223144066-1989371747.png
[consoleerror]: /images/20220604/24ee2b949c0d4940b99d93971e8704f5.png
[consoleerror 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223145504-1336536905.png
[ernconsoleok]: /images/20220604/29b92806fb904c2e96bc78f6edb8e9ce.png
[ernconsoleok 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223146504-965861911.png
[Tern Console]: https://github.com/angelozerr/tern.java/wiki/Tern-Console
[ularexplorer]: /images/20220604/459d6f4b419c4fc498eb11d5b568f20a.png
[ularexplorer 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223147707-1638847199.png
[ularexplorer_1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223149738-1481741127.png
[ularexplorer_1_ularexplorer_1]: /images/20220604/33c090da1a6c4ca396e85b770f40a2f4.png
[Angular Explorer]: https://github.com/angelozerr/angularjs-eclipse/wiki/Angular-Explorer-View
[gularelement]: /images/20220604/c7715328bebb4fd9b6ba98a351f515f6.png
[gularelement 1]: http://images2015.cnblogs.com/blog/321721/201603/321721-20160328223150394-1705317219.gif