Skip to content

Angular Explorer View

angelozerr edited this page Nov 7, 2015 · 12 revisions

Angular Explorer View

Angular Explorer View gives you the capability to display Angular elements like modules, controllers of your AngularJS application :

Angular Explorer view

This view is useful for :

  • display modules, controllers, etc in a view and go to the definition if you double click on it (open the JS editor and select the module, controller).
  • AngularJS "HTML templates" where module and controller is not defined inside the HTML. So you can link module and controller to the current HTML editor to benefit with Angular expression completion.

How to configure the view?

Define script path

To use Angular Explorer View, you must defines the whole JavaScripts files which must be used to load with Tern teh Angular modules, controllers. To do that you must configure Script path. Here a screenshot where script path was configured with an HTML file which defines "script" elements by using "Add File" button :

Configure script path file

You can define a folder with "Add Folder" which contains the JavaScript files to load. This configuration is used when your scripts to load are not declared in script element (or if script/@src cannot be resolved if you use for instance JSP EL contextPath).

Configure script path folder

Open "Angular Explorer" View

Open Angular Explorer view

Use the Angular Explorer view?

Go To Definition

The "Go To Definition" contextual menu gives the capability to open the JS editor and select the module, controller selected (you can do that too with double click) :

Go To Definition

HTML Template (Link/Unlink)

No completion :

Controller Link 1

To resolve this problem, you can link the HTML file to a controller with "Link to controller" menu action:

Controller Link 2

If you reopen completion, you will see completion :

Controller Link 3

Actions

Sort

You can sort angular elements (modules, directives, etc)

Angular Explorer - Sort

Stop tern server