Introduction:

Hello everyone! Today we are here to learn how to work in “AngularJs development” coding. Most users don’t know about it so I shall briefly define about “what is AngularJS and how does it work?”. JS stands for java script and AngularJS is a library of it. It can be said a short way to write JS code to get rid of long coding. We implement AngularJS development coding in a simple HTML file, the CSS designs are applied on it. We just add a script of AngularJS development in the head of HTML file. We use “ng” to define AngularJS. It is basically a framework of java library.

In our HTML code after adding the script in the header, we shall add “ng-app” inside our tag to tell AngularJS which tag is working as owner of it. We can use it in our body tag.

So what we shall do now? We needed an IDE for our coding. The most famous is “Webstorm” but I am using “NetBeans“, you can use what ever suites you. After installing it see on the left top, there is an option of file.

1) Click on file and select new project.

2) Select file type you wanted to use, I shall select HTML file and click next.

3) Give it a name you like. Give it a location where you wanted to save your project and click next.

4) Keep the no site template setup as default, click next and then click finish.

A new window will appear of AngularJS development project, holding HTML code. We shall add AngularJS functions and script in it and will run it in to the browser. More going on theory I wanted to explain this with coding and images for your ease.

Step 1) Making New Project:

For making new project just click on the file and select “New Project“. The below window will appear.

AngularJS Development

Description:

As you can see there are multiple file options, but we need HTML file type for our AngularJS development. I told you earlier that we use HTML files for our AngularJS development application. We add our functions tags and script in HTML that’s why we shall select select it and click the next button below. After clicking it, the new window will appear in front of you, shown below.

AngularJS Development

 Description:

You can see there is a field of “Project Name”, so give your project a name you like to. After that give it a location, where you wanted to save your project in the system. I named my project as “AngularJS hello“, you name it what ever you like to. After filling these fields click “next” button again. The new window will appear as shown below.

AngularJS Development

Do nothing on this page just click next and go to the new window then which will be like this.

AngularJS Development

Click finish button below. it will show you an index page with HTML code on it.

Step 2) The HTML coding:

Description:

Above is the HTML code you can see I added a script in the head portion. This script calls the AsgularJS development library. In side the body I took a “div” tag and applied a AngularrJS function on it as “ng-app“. This tell that this dive is acting as owner of AngularJS development file. Inside the “div” tag I wrote a statement and then placed a “input” tag and gave it a type “text”. It will show me a textarea where I can write anything I wanted to. After all this I used a AnjularJS function named as “ng-model“, it is used for binding the input tag. I placed it equal to the “text”, you can write whatever you wanted to.

Then I took a heading tag “h1”, I wrote a word “Hello” and then I assigned it the value of “ng-model” which is text. The value I assigned to it is in a pear of curly braces “{{text}}”  for binding it. Then just close the tags.

Step 3) Run The AngularJS Development file:

Normally it seems to be a problem for the developers, how to run the file into the browser. I shall make it simple for you, just give a quick look on the image below..

AngularJS Development

This is said to be the “toolbar” of the IDE. There is shown a play button in green color, just click on it the code will run in the browser. There is also shown my chrome browser, you can select the browser from here you like to.

After running this file the new tab will open in to the browser which will be like shown below in the picture.

AngularJS Development

Description:

Keep in mind first for running this file in chrome you have to add the extension of the IDE you are using while in Firefox you don’t need to. So this is what it looks like when I ran the file for you. The text is written before the textarea and write what ever you like to, it will appear in front of the Hello word. After writing the text it will be like this

AngularJS Development

You can see what I wrote in the textarea is appeared in front of the Hello word. So this is how we do AngularJs development.

Precautions:

Make sure don’t forget to define “ng-app” it tell the compiler that it is using java library for the AngularJS development. Add the Script of AngualrJS in to the head tag. use the function ng-model for binding up and double curly braces otherwise the value will appear with the Hello word and the code will not work.

  Conclusion:

Today I used the library of java script to lessen the code and make the code more effective and less time consumed. This library is easy to understand because it is based on just adding few functions in a simple HTML code and a single AngularJs script for the AngularJS development. We learned how to create new project in any IDE for AngularJS development coding. The code was easy and the images helped a lot to make things understand.