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

原文地址

本文介绍如何安装和配置 AngularJS Eclipse。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,那么只有语法颜色和完成指令(syntax coloring and completions directives)在 HTML 编辑器里可用。

安装

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 featuresJavaScript 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。

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

  • 若使用内置的 node,你必须根据你的操作系统正确选择内置的 node:

项目偏好(Project preferences)

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

Tern Modules

Tern 模块是一个 Tern 插件JSON 类型定义。勾选“angular 插件”,如下图所示:

.

The angular plugin gives you the capability to retrieve module, controllers,(custom) directives, etc from your javascript, manages completion hyperlink, hover, validation in HTML and JavaScript editor. It‘s enable to emulate the angular injection on your $scope, $http, etc.

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

Scripts 路径

When tern is used for completion, validation, hover, hyperlink, it must load before (just the first time) a list of your JavaScript. To do that you must configure your script paths by selecting your js folder which contains your javascripts(这类似 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

Open Angular Element

You can search and open angular elements like module, controller, directives, etc with the Open Angular Element dialog that you can open with Ctrl+Shift+Z when you are editing a JavaScript or HTML file :

时间: 2024-10-06 08:27:40

AngularJS Eclipse——新手入门【翻译+整理】的相关文章

javascript新手入门必读书籍推荐

在当下,极多的程序员是通过自学来完成入门以及提升的.对于JavaScript的学习来说,同样不例外.许多新手入门javascript选择通过视频教程或者论坛交流的方式进行学习,这种方式固然较为轻松和便捷,但在知识的获取上有些碎片化,对于新手来说不是很好. 在javascript的入门阶段,通过书籍来学习对于新手来说才是最好的手段.书籍的学习固然比较枯燥,但是也是最权威,最系统化的,对于新手来说能够快速的完成基础知识的奠基,而对于之后进一步的提升也是大有裨益.这里笔者就结合自身经验为各位javas

新手入门:微信小程序--从入门到精通宝典

<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家.大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的内容去学习.希望大家在这里能快速成长,成为微信小程序开发的顶尖高手. 本帖的内容结构如下:一:小程序之张小龙全面阐述及思维导图:二:微信小程序官方地址三:如何学习微信小程序四:新手入门系列教程集合五:公司开发前必读六:个人开发前必读 一:小程序之张小龙全面阐述及思维导图: 小程序之张小龙全面阐述:于1月9日上线(

【LaTeX】E喵的LaTeX新手入门教程(2)基础排版

换了块硬盘折腾了好久..联想的驱动真坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇文档框架嗯昨天我们已经编写了一个最基本的文档,其内容是这样的:\documentclass{article}\begin{document}XXX is a SB.\end{document}这个文档呢其实是分为两部分的:一部分是\begin{document}之前的那部分也就是第一行,这一部分我们称之为导言区.导言区的内容可以不只一行,它的作用是完成文档的基础设定.比如在这个文档中,我们使用

MATLAB新手入门教程

MATLAB入门教程   1.MATLAB的基本知识 1-1.基本运算与函数    在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: >> (5*2+1.3-0.8)*10/25 ans =4.2000 MATLAB会将运算结果直接存入一变数ans,代表MATLAB运算後的答案(Answer)并显示其数值於萤幕上. 小提示: ">>"是MATLAB的提示符号(Prompt),但在PC中文视窗系统

spring mvc开发入门实例demo源代码下载,很适合新手入门学习用。

原文:spring mvc开发入门实例demo源代码下载,很适合新手入门学习用. 源代码下载:http://www.zuidaima.com/share/1550463469046784.htm Eclipse + Maven + Spring MVC - Simple Example 源代码框架截图:

问题集录--新手入门深度学习,选择TensorFlow 好吗?

新手入门深度学习,选择 TensorFlow 有哪些益处? 佟达:首先,对于新手来说,TensorFlow的环境配置包装得真心非常好.相较之下,安装Caffe要痛苦的多,如果还要再CUDA环境下配合OpenCV使用,对于新手来说,基本上不折腾个几天是很难搞定的. 其次,基于TensorFlow的教学资源非常多,中英文的都有,这对于新手也是非常有帮助的.Google做社区非常有一套,在中国有专门的一群人,会在第一时间把Google的开发者相关的进展翻译成中文. 另外,由于有Google背书,Ten

安卓自动化测试(2)Robotium环境搭建与新手入门教程

Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单的Android应用程序 熟悉Eclipse IDE使用方法 有足够的耐心与探索精神,遇到问题可以熟练的Google 环境搭建 安装jdk,配置环境变量,如果不会请自行Google 下载安装Android SDK,并更新 下载Eclipse,并安装ADT插件,集成Android SDK Roboti

最新hadoop新手入门教程汇总

关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧.最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容.写过程不是很难,最烦的可能还是要给每一步配图,工程量确实比较大. 原计划准备接上一篇内容写dkhadoop的监控页面的参数,突然觉得还是有必要把上两周写的内容做一个汇总,这样方便需要的朋友浏览.上两周写的五篇内容,汇总到一起就算是hadoop新手入门的一个基础性教程吧(持续更新中). 五篇文章讲什么? 前两周时间写的五篇文

C语言/C++编程新手入门基础学习中链接类型

C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现过程(事务)控制).创一个小群,供大家学习交流聊天如果有对学C++方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学C++能够持之以恒C++爱好群,如果你想要学好C++最好加入一个组织,这样大家学习的话就比较方便,还能够共同交流和分享资料,给你推荐一个学习的组