We are going to look at some of the useful developer tools for angularJS development through a series of posts. In this post, we will discuss about the IDE, JetBrains WebStorm and how to create a sample project using WebStorm
Introduction to JetBrains WebStorm
You will find many IDEs for angularJS development like JetBrains WebStorm, Sublime Text, Atom etc that makes your life easy. I recommend using WebStorm and I am going to show you to set up the developer tools for angularJS through a series of posts.
You can download the latest trial version of WebStorm from here .
Click on Create New Project and you will see a list project types and you can choose depending on your requirements.
You will see the following sample angularJS project created, if you select AngularJS from the list.
You can also check out from the version control repository to your WebStorm. You can select the following option shown in the figure if you wanted to do so.
In this post, I’m going to start everything from scratch. Therefore, you can choose the empty project type and set your project directory in the location field.
Creating Our First Project in WebStorm
Download AngularJS framework from here.
You can see the auto completion feature of JetBrains WebStorm as you type.
Finally, we will include the angular.min.js file in libs/Angular directory into the index.html.
We have used the following HTML in this post to introduce WebStorm for angularJS development.
Copy<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app=""> <p>Enter Some text : <input type="text" ng-model="someText"></p> <p>Hello <span ng-bind="someText"></span>!</p> </div> <script src="libs/Angular/angular.min.js"></script> </body> </html>
We have successfully created our first angular application using WebStorm.
That’s all for now and we will discuss about the package manager Bower and its usage in the coming post.