angular js eclipse plugin 

Angularjs Eclipse – NewComer Getting Started

This article describes how to install and configure Angularjs Eclipse. The Eclipse Angularjs plugin is based on the powerful JavaScript Enference engine (JavaScript Enformation Engine)Tern.jsIt is written in JavaScript. If you use this engine in a Java environment, you need to use Tern.js. That’s why you’ll see it below.node.jsOr eclipse the built-innode.js。

If you don’t have Node.js installed alone or use embedded Node ude.js, only the syntax coloring and auto-complete instructions are available in the HTML editor.

installation

Angularjs Eclipse recommends using Eclipse Jee version 4.5 (Mars) or higher.

When you use the Angularjs Eclipse Update site installation you will see the following picture, of course you can also log into “Angularjs” directly in the Eclipse “marketplace”:

You must select:

• Angularjs Eclipse Tooling, Angularjs Plugin Eclipse.
• Angularjs support for JSP, if you want to use JSP with Angularjs, you need to install this.
• Tern is a built-in Node.js. If you don’t have a separate installation of Tern.js on your machine, you must have Node.js.
• Tern IDE. Tern is used for the Eclipse IDE.
• Tern is a tool. Create tools for TERN plugins, JSON type definition or web browser editor (CodeMirr, Ace, Orion). For more information, see Tern Toolings

Angularjs configuration

Use Eclipse Angularjs (HTML features with JavaScript featuresYou must convert your project into an Angularjs project:

Settings

Global preferences

Set it in the Eclipse dialog box / preferences.

Node.js
Angularjs Eclipse based JavaScript Enference Engine -tern.js If you want to use it, you need to use it.node.js(Rhino is a bit slow). Configure node.js Next:

• If you have already installedpodе.jѕ separatelyYou need to choose the node installation type, and the installation path to Nodejs on your computer:

When you select the native node, it looks for the node executable in the default folder (e.g., for the Widnows operating system, C: \ Program Program \ Nodejs \ Node.exe), if not, try looking for an environment variable path.

Note. After installing a single node, it is best to restart the computer before using Eclipse Angular JS, which means that the operating system has correctly updated the path environment variable.

• If you are using an embedded node, you must correctly select the embedded node according to your operating system:

Project preferences

Next – set “Project Preference”, right-click to select your project, click “Properties”.

Tern Modules.
Tern Modules isTern PluginIs the same JSON definitionDefinition Check the “Corner Plugin” checkbox, as shown below:

Angular plugin allows you to get module, controllers (custom) directives, etc. D., Hyperlink Controls for Completion, Hover, ValidaScript Editor from your JavaScript. Allow you to simulate angles typed into your HTTP, etc. Д.

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

Scripting Path

When you use Tern to complete, check, hover, hyperlink, you must load your JavaScript, but only first. Consequently, you need to set up the script path and add your JavaScript folder in (this is similar to the Java build path):

For more information, please refer toTern Script Path

Individual syntax directives
In the HTML editor, use Syntax NG- * to provide instruction names:

Note, automatic reminder, shortcuts written in the document Ctrl + Space, but in my eclipse, ALT + /

Angular supports a lot of grammar, such as starting with “X – ‘,” Date- “, using”: “,” -‘, “_” separation. You can also customize. By default you will see the following configuration:

You can choose a different beginning and split syntax. In the multi-line text box you will see:

After checking your configuration, Eclipse displays the name of the syntax instruction:

Check

If you have a right, click to select your page, click the Check menu:

You will see the instruction Angularjs has information about the alarm:

In this example there are two alarms, that is, two exclamation points:

• NG-application is an angular directive
• Attribute header attribute does not exist.

You can disable alarm information that cannot identify attributes, but Eclipse engularjs provides “HTML angular sync” which is an extension of “HTML syntax” that supports the angular directive. If you want to use the angularjs verifier, you must enable it and disable the “HTML Syntax Validator”:

If you re-authenticate, you will find Angularjs command signaling, but it is not possible to identify the attribute attribute.

continue to

Eclipse Angulyjs configuration has since been completed and then check if everything is fine (the triple is correct).

HTML editor

Open HTML file with standard WTP HTML, JSP editor.

Try to automatically open your module in NG-App:

JavaScript editor

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

These functions are managed by Tern, if you are not working properly, please refer to theTroubleshooting section.

Troubleshooting

If the HTML and JavaScript editor cannot be automatically prompted as above, it means that Tern is not configured. Check the error with the following:

• Viewing the error log
• Tern console

Tern Console

You can track Node.js and Tern’s Prem / Response by Eclipse Console.

As shown in the figure below, you must first activate your project’s TERN console:

Note that the parameter to activate the Tern Console may be different in your Eclipse. It’s not the same as what’s above, not in the console, but in development.

Then open the Tern Console:

If you try to use the Tern Service, you will get a reminder, you will see the following error message:

When everything is gone, you will see a JSON TERN SERVER request/response for TERN. The following:

For more information about Tern Console, please refer toTern Console。

Corner Browser

The Angular Browser view can display angular elements, such as modules and controllers of your Angularjs application. If you want to open it, click on the Eclipse / Show View window and select Angular explorer:

After that, you can see your module, controller, etc. Д.:

ul

For more information, please refer toAngular Explorer。

Open angular elements

When you want to edit a JavaScript or HTML file, you can extract and open an angular element located in Eclipse, navigation/open angular element like module, controller, directives, etc. etc., Or directly click shortcuts.Ctrl+Shift+Z：

gularele