AngularJS Introduction to JetBrains WebStorm With Examples

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.

webStorm4-450x288

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.

webStorm4-450x288

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.

empty-450x286

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.

empty-450x286

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.

indexpage-450x287

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.

index.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.

By admin

Leave a Reply