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

http://oss.opensagres.fr/angularjs-eclipse/0.5.0/

你必须选择:

  • 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、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

文章来源:http://www.cnblogs.com/liuning8023/archive/2016/03/28/5331001.html

AngularJS Eclipse Plugin的更多相关文章

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

    原文地址 本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference e ...

  2. Hadoop 1.1.2 eclipse plugin 编译 win7 集成

    Windows平台上使用ANT编译Hadoop Eclipse Plugin 一.准备工作:   1.安装JDK 下载页面:http://www.oracle.com/technetwork/java ...

  3. Peer Code Reviews Made Easy with Eclipse Plug-In

    欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jiangxinnju/p/4781259.html GitHub地址: https://github.com/ji ...

  4. GWT(Google Web Tookit) Eclipse Plugin的zip下载地址(同时提供GWT Designer下载地址)

    按照Eclipse Help->Install new software->....(这里是官方安装文档:http://code.google.com/intl/zh-CN/eclipse ...

  5. Installing the Eclipse Plugin

    Installing the Eclipse Plugin Android offers a custom plugin for the Eclipse IDE, called Android Dev ...

  6. Eclipse Plugin Dev Materials

    以下资料是本人在开发Eclipse 插件时候收集的一些比较有用的资料Link,和大家分享下. 比较权威的资料: Helpful Eclipse Plugin Websites: Eclipse Art ...

  7. Eclipse plugin web site 发布和版本更新

    Eclipse plugin web site 发布和版本更新 在eclipse插件开发过程中免不了要发布1.0, 1.1, 1.2…….等等,随着版本的递增,假如每次都发布一个插件zip包,那使用者 ...

  8. eclipse plugin 导出插件包

    当我们的插件在完成一个阶段性开发的时候,我们要发布一个1.0的版本.这个时候会碰到一个问题.如何把我们的插件打成包?有多种途径,下面具体讨论一下. 首先从插件完成到被他人(或者我们自己)使用有两个步骤 ...

  9. How to setup Eclipse with WinAVR and the Eclipse plugin AVR-eclipse

    源:How to setup Eclipse with WinAVR and the Eclipse plugin AVR-eclipse Arduino development with Eclip ...

随机推荐

  1. SDK管理利器——sdkman

    SDK管理利器--sdkman 项目使用java的开发者一定会为新配环境变量而头大,sdkman很好的解决了系统sdk管理的痛点,仅需简单的几行命令就可以完成sdk的安装,更改默认版本.再也不用担心环 ...

  2. 咏南中间件修正了一处BUG,调用中间件插件会报:非法访问

    咏南中间件修正了一处BUG,调用中间件插件会报:非法访问将以下方法修改成如下的代码即可function TServerMethods1.GetSvrData(const accountNo, defi ...

  3. IntentService介绍

    1.IntentService 是什么 一个封装了HandlerThread和Handler的异步框架. 是一种特殊Service,继承自Service,是抽象类,必须创建子类才可以使用. 可用于执行 ...

  4. 打造一个简单实用的的TXT文本操作及日志框架

    首先先介绍一下这个项目,该项目实现了文本写入及读取,日志写入指定文件夹或默认文件夹,日志数量控制,单个日志大小控制,通过约定的参数让用户可以用更少的代码解决问题. 1.读取文本文件方法 使用:JIYU ...

  5. Katalon Studio简单使用(一)

    官网地址:https://www.katalon.com/ katalon 目前有两种产品 一个是studio 另外一个是katalon analytics,此处先来学习studio部分. 文章学习内 ...

  6. 开源应用框架BitAdminCore:更新日志20180903

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:https://www.bitadmincore.com 框架源码:https://github.com/chenyi ...

  7. 跨域处理之Jsonp

    一.认识Jsonp JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式 ...

  8. java 实验4 异常

    异常(实际使用直接try-catch) 1.常见系统异常 异常 异常的解释 ClassNotFoundException 未找到要装载的类 ArrayIndexOutOfBoundsException ...

  9. 洛谷P5279 [ZJOI2019]麻将(乱搞+概率期望)

    题面 传送门 题解 看着题解里一堆巨巨熟练地用着专业用语本萌新表示啥都看不懂啊--顺便\(orz\)余奶奶 我们先考虑给你一堆牌,如何判断能否胡牌 我们按花色大小排序,设\(dp_{0/1,i,j,k ...

  10. robot framework学习笔记之三—Scalar变量

    一.变量赋值 1)Set赋值 通常使用Set Variable关键字对变量进行赋值,其他Set相关的带Variable的关键字也可以进行赋值 赋值的时候,变量后面写不写『=』都可以,如下: 如果${v ...