PhpStorm support for AngularJS

Do you like to use AngularJS to build the front-end of web applications? PhpStorm makes AngularJS-related work on it as easy as other programming languages supported by IDE! In order to automatically complete the quick documentation and navigate to and support custom commands and routes, the only thing we need to do is to install the AngularJS plug-in PhpStorm. Why not?

Add AngularJS plug-in PhpStorm

Not all PhpStorm features are enabled by default, and AngularJS is one of them! We can selectIDE Settings | PluginsAnd clickInstall JetBrains Plugin...Click the button to install AngularJS into our IDE,To enable the AngularJS plug-in for PhpStorm.. Restart later. We should have a comprehensive support for AngularJS!

AngularJS auto-completion support

Some people say, "each word in the dictionary has a Javascript framework corresponding to it. this is why PhpStorm does not display auto-completion functions for so many Javascript frameworks by default, because we don't want to scare you! To enable automatic completion of AngularJS, we can do one of the following two things:

• Download AngularJS scripts from their website andAngular. js file added to our project.

• Use an external CDN and add the correct script mark like our application. (Note: PressAlt + Enter Download Library. PhpStorm will download AngularJS methods, commands, documents, and so on, and set a cache to provide automatic completion. This can also be done throughProject Settings | JavaScript | Libraries, UseDownload library...Button to download from TypeScript Community ClubAngularjs.

 

Once these operations are completed, PhpStorm can start to provide automatic completion for HTML attributes (for example. ng-app) and Automatic completion for Javascript. there are various abbreviations available: Enter na to adapt to ng-app,NcNg-class will be configured. When appropriate, our controller and custom settings will be listed in the suggestion list. Matching brackets will also be automatically completed: Enter{{It will also be inserted automatically}}.

You can also pressCtrl + Q (InMac OSX isF1 )To quickly view our Angular instruction documentation. You can also click to view online documents quickly.

 

Navigation and check
 

In the same way, we can navigate in a PHP code base and a JavaScript code base. Now we can navigate and browse the entire AngularJS application. In the module, you can navigate between controllers and commands.Ctrl + click (Used on Mac OS XCmd + Click,), It will immediately take us to the place where our modules, controllers and commands are defined. We can useCtrl + Alt +Left arrowNavigate back to our original location(Used on Mac OS XCmd + Alt +Left arrow).

You can also use. PhpStorm on variables and filters in the navigation. It will prompt us when it cannot find the given module, controller or filter:

 

Support for custom commands and refactoring
 

PhpStorm also supports Automatic completion and navigation of our own commands. we can even tell PhpStorm which option should be used when calling auto-completion: If we use limit: 'E' for custom elements, IDE will automatically limit the auto-completion to elements. if we use the limit: 'A', it only takes effect for the attribute.

We can also add auto-completion support for expressions in custom commands. the only thing we need to do is to use @ ngdoc, @ name, and @ param to add appropriate documents. IDE will convert the document to know which property receiving expression.

If we use Rename refactoring to Rename our customization(On Mac OS XShift + F6OrCtrl + T), PhpStorm will update both HTML and Javascript (as well as comments, documents,...) so that our names are always synchronized.

 

Support for routing and URL templates
 

PhpStorm also provides automatic completion and navigation to help us in routing and URL templates. Here, we can put our mouse pointer between quotation marks and pressCtrl + Space to use automatic completion based on the current path. If we pressCtrl + SpaceTwice, the entire project will be displayed.

Note that when multiple modules are created, we need to mark the local parent directory as a resource root so that automatic population and navigation can work properly.

Refactoring also works here: if we use Rename on any file or URL template for refactoring, PhpStorm will update all references in our entire project.

Interested in using AngularJS in PhpStorm? Download the latest PhpStorm 8 EAP and install the AngularJS plug-in! You are welcome to give feedback on issue tracker or reply to the comments in our forum!

Happy development!

-JetBrains PhpStorm team

AngularJS support in PhpStorm

Http://www.oschina.net/translate/angularjs-support-in-phpstorm.