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
Contents
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 .
You will see the following screen when you launch the WebStorm for the first time. You can choose the required option.
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.
I have created a project directory named Angular under Projects folder.
You will see the following screen when you click on the create button.
Creating Our First Project in WebStorm
Download AngularJS framework from here.
I have created a directory libs/Angular to attach the downloaded angular.min.js file. You can see that in the following image.
Now we are going to create a simple application. You can create an HTML file as shown in the following figure. Right click on your project and select the type of file you want to create.
I have created an HTML page called index.html
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.
|
1 2 3 |
<script src="https://www.journaldev.com/8276/libs/Angular/angular.min.js"></script> |
We have used the following HTML in this post to introduce WebStorm for angularJS development.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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="https://www.journaldev.com/8276/libs/Angular/angular.min.js"></script> </body> </html> |
You can run the above application simply by clicking on one of the browser icons shown on top left of the WebStorm. You can see that in the following figure.
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.