What is AngularJs

So let us start with basics What is AngularJs? AngularJS is a Javascript framework which helps in building web applications.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag in HTML file.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Who Developed AngularJs?

AngularJS framework is developed by google and it is an open source project which can be freely used in any application commercially and can be shared with anyone.

Why AngularJS?

  1. MVC: – The major benefit of using AngularJS is it works on the Model View Controller design pattern. Using angular its easy to develop an application with neat and clean MVC approach. Angular implements MVC by asking you to split your application into MVC components(Model View and Controller), then just let Angular takes care the rest of the things for you. Angular manages your components for you and also serves as the pipeline that connects them.
  2. Dependency Injection: -Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The angular subsystem is in charge of creating the components, resolving its dependencies and providing them to other components when requested. If you are new to Dependency Injection Checkout DI with AngularJS for more details
  3. Unit Testing: – Angular is built considering the unit testing, this is one of the major benefits of angular. It now easy to perform unit testing on AngularJS applications and components as it supports DI.
  4. Two-Way Data Binding: – Angular works little differently and supports two-way binding.  First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.

Two-Way Data Binding In Angular Templates

Getting Started with AngularJS Simple Application

The first step is to download the latest AngularJS Framework from https://angularjs.org/  and add the reference of the script in the application or you could just add the online or CDN version of script tag into your HTML page as shown in the beginning of the article.

AngularJS Extends HTML with ng-directives. The basic ng directives which we use commonly are

  1. ng-app – ng-app is called the directive in angular and it is the starting point of the angular application. Angular will always check the ng-app directive first when the HTML page is loaded before processing anything.
  2. ng-model – The ng-model directive is used to binding view into the model, which other directives such as,input textarea or select require. It is also responsible for the validation like required, email, numbers etc.
  3. ng-bind – The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

AngularJS Example: – In the below example we have used all the 3 common directives.

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>




Leave a Reply

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

Sign Up for Our Newsletters

Subscribe to get notified of the latest articles. We will never spam you. Be a part of our ever-growing community.

You May Also Like