AngularJS Eclipse Plugin

This article describes how to install and configure AngularJS Eclipse. the AngularJS Eclipse plugin is based on the powerful JavaScript inference engine (JavaScript inference engine) Tern.js, which is written by JavaScript. If you use the engine in a Java environment, you need to use Tern.java. It executes tern.js with node. js. That's why you'll see below that you have to install node. js or Eclipse's built-in node. js.

If you do not install node. js alone or use Eclipse's built-in node. js, only the syntax color (syntax coloring) and auto-complete instructions (completions directives) are available in the HTML editor.

Installation

AngularJS Eclipse recommends using the Eclipse JEE 4.5 (Mars) version, and above.

When you use the AngularJS Eclipse Update site installation, you will see as shown, of course, you can also enter "AngularJS" directly in Eclipse's "Market Place":

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

You must choose:

• AngularJS Eclipse tooling,angularjs Eclipse plugin.
• AngularJS support for JSP, if you want to use a JSP with AngularJS, you need to install this.
• Tern-built-in node. js. If you do not have node. js installed on your machine separately, then executing tern.js must be a node. js.
• Tern IDE. Used by the Eclipse IDE to use Tern.
• Tern-tooling. Generate Tern plug-ins, JSON Type definitions, or Web Browser editor (Codemirror, Ace, Orion) tools. For more information, see Tern toolings

AngularJS Configuration

Before you use the AngularJS Eclipse feature (HTML features and JavaScript features), you must convert your project into a AngularJS project:

Preference settings (Preferences Settings)

The following shows how to configure Tern and angular.

Global Preferences (Globals Preferences)

Set in the Eclipse's window/preferences dialog box.

node. js

AngularJS Eclipse is based on the JavaScript inference engine--tern.js. If you want to use it, you need to use node. JS (Rhino is a bit slow). Configure node. js as follows:

• If you have node. js installed Separately, you need to select the Native node installation type and the installation path for Nodejs on your machine:

When native node is selected, it searches the default folder for the node executable (for example, for the Widnows operating system, C:\Program Files\nodejs\node.exe) and, if not found, attempts to search in the PATH environment variable.

Note: After installing node separately, it is a good idea to restart your computer before using Angular JS Eclipse, in order for the operating system to properly update your PATH environment variables.

• If you use the built-in node, you must choose the built-in node correctly based on your operating system:

Item Preferences (project preferences)

The next step is to set "project preferences", right-click on your project, and select Properties.

Tern Modules

The Tern module is a Tern plug-in or JSON type definition. Tick "angular plugin" as shown in:

The

Angular plugin allows you to retrieve module, controllers, (custom) directives from your JavaScript, and so on, managing completion hyperlink, hover, validation In HTML and JavaScript editor. Let you simulate angular injected into your   s c o p e & #x3001; > Sco pe , scope, HTTP and so on.

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

Scripts Path

When you use Tern for completion, validation, hover, and hyperlink, you must load your JavaScript, but only for the first time. Therefore, you must configure the script path to add your JavaScript folder (this is similar to Java build path):

For more information, please refer to Tern Script Path

Custom Directives Syntax

In the HTML editor, use the ng-* syntax to provide the command name:

Note that the automatic reminder, the shortcut key written in the document is Ctrl+space, but in my Eclipse is, alt+/

Angular supports many grammars, such as ' X ', ' data-', using ': ', '-', ' _ '. You can also customize it. By default, you will see the following configuration:

You can choose the other beginning and delimited syntax. In the multiline text box, you will see:

After verifying your configuration, Eclipse displays the instruction name for that syntax:

Verify

If you have the right button to select your page, click on the "Validate" menu:

You'll see the AngularJS command has an alarm message:

In this example, there are two alarm messages, which are the two exclamation marks:

• Ng-app is a Angular directive.
• The "a" property of the head element does not exist

You can disable alarm information for unrecognized attributes, but AngularJS Eclipse provides "HTML Angular Syntax Validator", an extension of "HTML Syntax Validator" that supports Angular instructions. To use the Angular authenticator, you must enable it and disable HTML Syntax Validator:

If you re-verify, you will find that the AngularJS command alarm message is not available, but the attribute alarm is not recognized or:

Validation & JSP

If you use JSP, you must disable JSP content Validator and enable jsp Angular content Validator.

Go on

Since then, AngularJS Eclipse configuration is complete, then check that everything is OK (Tern is configured correctly).

HTML Editor

Open an HTML file with the standard WTP html,jsp editor.

Try to automatically open your module on the Ng-app:

JavaScript Editor

Open a JavaScript editor and try to open the Angular module automatically:

These features are managed by Tern, and if they do not work, please refer to the Troubleshooting section.

Trouble shooting

If the HTML and JavaScript editors do not automatically prompt as above, it means that the tern is not configured properly. Check for errors in the following ways:

• Error Log View
• Tern Console

Error Log View

Tern Console

You can track the request/response of node. JS and Tern through the Eclipse console.

As shown, you must first activate the Tern console for your project:

Note that the option to activate the tern console can be different on your Eclipse. Not quite the same, not in the console option, but in the development.

Then, open the Tern console:

If you try to use the Tern service, automatic reminders, you will see the following error message:

When everything does not, you will see the Tern service JSON request/response of the tern server. As shown below:

For more information on the Tern console, refer to Tern console.

Angular Browser

The Angular browser view can display Angular elements, such as your AngularJS application's modules and controllers. To open it, click Eclipse's window/show View and select Angular Explorer :

After that, you can see your modules, controllers, and so on:

For more information, please refer to Angular Explorer.

Open the Angular element

When you want to edit JavaScript or HTML files, you can use the Angular Element dialog box to retrieve and open the Angular element, located in the Eclipse navigate/open Angularelements, like Modul E, controller, directives, etc., or press the shortcut key directly Ctrl+Shift+Z :

Article Source: http://www.cnblogs.com/liuning8023/archive/2016/03/28/5331001.html

AngularJS Eclipse Plugin