AngularJS Introduction to JetBrains WebStorm

Filed Under: AngularJS

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

Click on Create New Project and you will see a list project types and you can choose depending on your requirements.

webStorm3

You will see the following sample angularJS project created, if you select AngularJS from the list.

webStorm4

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.

gitWebStorm

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.
webStorm2You will see the following screen when you click on the create button.

empty

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

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

I have created an HTML page called index.html
addhtml

You can see the auto completion feature of JetBrains WebStorm as you type.

indexpage

Finally, we will include the angular.min.js file in libs/Angular directory into the index.html.


<script src="libs/Angular/angular.min.js"></script>

We have used the following HTML in this post to introduce WebStorm for angularJS development.

index.html


<!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>

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

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.

Comments

  1. Raviteja says:

    Can you tell me how to attach a .js file to a directory

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages