AngularJS eclipse--Beginner "translation + finishing"

Original address

This article describes how to install and configure AngularJS Eclipse. the 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 or use the Eclipse built-in node. js, only the syntax color and completion instructions (syntax coloring and completions directives) are available in the HTML editor.

Installation

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

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":

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). node. js must be configured as follows:

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

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 the PATH environment variable for no De

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 tap "Properties".

Tern Modules

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

.

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 the other tern module like the jquery for instance to benefit with jquery completion inside JavaScript Editor.

Scripts Path

When Tern was used for completion, validation, hover, hyperlink, it must load before (just the first time) a list of your J Avascript. Must configure your script paths by selecting your JS folder which contains your javascripts (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 is ctrl+space, but in my Eclipse yes, 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 Angular Element

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

AngularJS eclipse--Beginner "translation + finishing"