1. Go to the JetBrains website, download and install WebStorm (a free trial is available for 30 days if you don’t have a licence).
2. Go to the AngularJS website.
Here you can find the library and a useful documentation.
3. Download the latest version of AngularJS (the UNCOMPRESSED file otherwise WebStorm will not be able to use it correctly).
4. Download and install the Chrome or Firefox extension for JetBrains. I will use Chrome for my documentation.
5. Open WebStorm and create a new empty project.
6. Right click on your project name and add a HTML file.
7. Call this file index.
8. Now we will add the full support of AngularJS in WebStorm (intellisense/autocompletion).
Click on File – Settings – Project Settings – JavaScript – Libraries – Add…
9. Click on the green +, then Attach File
10. Select the angular.js file you downloaded before and click OK. Then in the Visibility section, select Global, then OK.
11. So now you should have something like this :
12. Click OK to save your settings. Now you have the full support of AngularJS globally for all your projects. Before we can try it, we have to copy the angular.js file to our sources.
13. First we have to add a reference to our angular.js library. Add this line between the body tags :
<script type="text/javascript" src="angular.js"></script>
14. Add a div and write ng inside then use the Tab key. You should be able to see the autocompletion like this:
15. Let’s do the simplest example in Angular:
<div ng-app="">
{{1 + 1}}
</div>
Then it F5 to debug.
16. If you have this message:
Then you should configure your JetBrains extension in Chrome.
To do this, open Chrome and right click on JB icon and Options:
And change the port according to the error message:
You should now have this in your browser:
If it still doesn’t work check the url in the browser, the port should be the same too. So here http://localhost:62043/firstTest/index.html
17. To be able to see the changes in live you have to activate the option in View – Live Edit and don’t forget to refresh the page in the browser with F5.
No Comments Yet