facebook
Brian Fernandes
Director of Customer Engagement - Loves technology and almost everything related to computing. Wants to help you write better software. Follow at @brianfernandes.
Posted on Aug 10th 2017

You might now be familiar with easy cruising through a CodeMix or an Eclipse project after reading our blog or thanks to a personal experience, but what if you are more of an Angular guy or gal? No worries, breezy navigation is also a reality for Angular projects.

This video will give you some useful tips on how to navigate both between files, and within them by using an Open TypeScript Symbol dialog as an example. Simply watch this video below to to learn how to work your way through an Angular project very easily, or read through our notes.

Navigating Between Files

Open TypeScript Symbol Dialog

Open the Open TypeScript Symbol dialog using Ctrl + Shift + T, or the button on the toolbar. Simply type in the symbol name to find the one you are interested in.

Tips:

  • You could also use the initialism notation to filter to symbols – “PL” to filter ProductList, for example.
  • Use Ctrl + Shift + R to open just about any file in your workspace, with a similar, filterable dialog.

me-open-ts-symbol-dialog

Breadcrumb Toolbar

If you’re exploring a new code base or just dealing with a group of related files, use the toolbar to easily jump between them.

me-breadcrumb-toolbar

MyEclipse Explorer / Project Explorer+

Use the filter at the top of the view to search for files and folders whose names match the text typed in.

me-explorer

Miscellaneous Shortcuts

  • Ctrl + E to open a filter listing files that are currently open, or Ctrl + Shift + E for a more detailed dialog.
  • Ctrl + F6 to cycle through open files.

CodeLive

Testing your Angular application in a browser, but need to get to the source quickly to make a change? Use CodeLive to quickly locate the source for Angular components. See this article for more details.

Navigating through Code

Hyperlink Navigation

Enable hyperlink navigation by pressing Ctrl and then hovering over items of interest. Just click to navigate to a file in which the element is defined — could be another location in the current file too.

Minimap

The minimap is an excellent graphical outline, great for moving quickly through larger files.

Quick Outline

While everyone is familiar with how the Outline view works, the quick outline makes navigation much faster. Press Ctrl + O to bring up the quick outline and just start typing to move to the element of interest.
Tip: You can press Ctrl + O a second time to show inherited members.


Edit Locations and Annotations

Use Ctrl + Q to jump to the last edit location, this is great for quickly getting back to a modification you’ve just made. If you need to skip further behind, or ahead, use Alt + Left Arrow or Alt + Right Arrow, respectively.

If you’d like to jump through errors or warnings, use Ctrl + , and Ctrl + . to jump backwards and forwards, respectively. This is handy when fixing errors in your code, or maintaining an older codebase.

Even if you are new to Angular, as you can see, there are no reasons to be intimidated even by sizable projects. If, on the other hand, you’ve been at it for awhile, here’s a quick reminder of all the amazing navigation aids available to make your coding experience like a sail into the sunset on a beautiful lagoon (not a shark-infested stormy sea). Remember, most of these shortcuts aren’t specific to Angular projects, so try them everywhere!