Post
Ask Question

Basics Of AngularJS

First of all, we need to know what AngualrJS is and why should we learn it and use it. This article is designed to teach the basics of AngularJs easily and efficiently.

What is AngularJS?

AngularJS is a JavaScript Framework that is very powerful and its library is written in JavaScript. This framework is used to make single page applications. From this definition, you should get an idea that if we want to make a Single Page application, AngularJS is the answer as the most powerful JavaScript Framework. AngularJS extends the HTML with new attributes. AngularJS allows us to write applications in a clean Model-View-Controller way.

History

The first version of AngularJS, Version 1.0, was released in 2012. Google started working on AngularJS in 2009 and launched it in 2012. Now, AngularJS is officially supported by Google. AngularJS is an open source framework.

Prerequisites
  1. Any Text Editor
  2. JavaScript Knowledge
  3. HTML Knowledge
  4. MVC (Model-View-Controller) basic concepts.

Brief

To Use AngularJS in a project, first a JavaScript Library must be referenced.

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

You can download the file from this link as well and store it locally in your project and reference it from local path.

As we know, the library is referenced in Head Tag. This Library is also referenced into Head Tag.

  1. <head>  
  2.       <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  3.    </head>  

As we have read that AngularJS extends HTML, this is done with the help of directives, called ng-directives. These directives are the Angular components. Three major parts of AngualrJS Framework are- ng-app, ng-model, ng-bind.

  • ng-app This directive defines an AngularJS application.
  • ng-model This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind This directive binds the application data to View (HTML View).

Now, we will just see an example of AngularJS library and these three directives.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="">  
  7.   <p>FirstName: <input type="text" ng-model="fname"></p>  
  8.   <p ng-bind="fname"></p>  
  9. </div>  
  10.   
  11. </body>  
  12. </html>   

Here, in this example, we can see that after referencing AngularJS library in head tag, we have used ng-app, ng-model, and ng-bind directives. Let’s see what these are doing here.

ng-app directive is used in the div tag <div>. This makes this div tag the owner of this AngularJS application, which means this confirms that from this div, we are staring the Angular application and Angular features will be starting from this tag.

ng-model directive, in the input tag, binds the value of this input field to variable “fname”.This fname's value has been assigned by this ng-model. Whatever we type in this input field, the value will be assigned to fname variable.

ng-bind directive now binds the value which was assigned to variable “fname”, to innerHtml of the <span> tag.

Now, if we run the application, we will see the screen as-

Now, whatever we will type in this FirstName textbox, it will be automatically output to span tag below. Let’s type something and see the output.

 

Here, we have seen that whenever we type something in Textbox, it was printed as well. You can run this one page application and check it. I have attached the source code also. Download it and run it with different inputs.This was just a brief of AngularJS. In the next part, we will learn about other Angular directives.

Thanks for reading. Please provide your valuable feedback. 
Next Recommended Reading Load CSS Theme Dynamically on user selection in AngularJS