湘江鸿

MacOS X eclipse angular插件安装与配置

2016/02/24

在eclipse中安装angular插件

1.插件安装地址为http://oss.opensagres.fr/angularjs-eclipse/1.1.0/
最新的安装地址在这里。

2.在eclipse中选择help->install new software，输入插件安装地址，选择所有的插件：

3.安装插件预览：

插件配置

  1. 全局配置
    由于AngularJS插件使用了JavaScript分析引擎tern.js（使用JavaScript编写），因此需要node.js来执行这个引擎。
    选择eclipse/偏好设置，由于JEE版本的eclipse包含了JSDT，tern配置节点在JavaScript节点之下：

保持默认配置即可，默认使用的是安装插件时已经装好的node.js。

2.项目配置
新建一个dynamic web project，并且转为angular项目

选择Tern支持插件，我在保持默认的基础上选择了jQuery，并确定

打开项目属性，可以看到项目属性里增加了AngularJS和Tern，说明已经是angular项目了：

3.脚本路径配置
使用Tern进行代码完成，代码验证等特性，Tern需要预先加载JavaScript文件，这样就可以用于代码完成和代码验证了。
在WebContent下面新建js文件夹，并将下载的angular.js拖到其中：

打开项目属性，可以看到script paths 已经自动加入了angular.js

检查验证功能是否有效

新建一个html文件，输入以下简单angular代码：

<!DOCTYPE html>
<html>
<script src="js/angular.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello </h1>

</div>

</body>
</html>

可以看到ng-app还是带黄色下划线警告：

我们打开项目属性，在Validation节点下做如下配置。
关闭html syntax validator和JSP content validator，选择对应的angular validator

关闭已经打开的html文件，再次打开，可以看到警告已经消失：

代码提示功能

部署应用

（转载本站文章请注明作者和出处 湘江鸿的博客）

Post Directory