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.
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:
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.
Use the filter at the top of the view to search for files and folders whose names match the text typed in.
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.
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.
The minimap is an excellent graphical outline, great for moving quickly through larger files.
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.
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!
