EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials AngularJS Tutorial What is AngularJS
 

What is AngularJS

Priya Pedamkar
Article byPriya Pedamkar

What is AngularJS

Overview of AngularJS

At Brat Tech LLC in 2009, developers Misko Hevery and Adam Abrons developed an AngularJS framework, after which a revolution occurred in front end development and building single-page applications. AngularJS is a javascript framework which binds Html elements with javascript objects. Data binding and Dependency Injection are some of the leading features of AngularJs, which save time in writing lengthy codes making developers and browsers work easier. How that is achieved will be deeply explained, but you just remember these terminologies for now. In this topic, we are going to learn about AngularJS Version.

 

 

Versions of AngularJS

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

AngularJS is the Angular 1.x version, and after that, Angular 2 is developed, which is different from Angular 1.x. works.

Why AngularJS Version and How does it work?

AngularJS helps us to develop interactive single-page applications. By single-page applications, I mean that the single page that you visited will load all other content using javascript. This feature helps the application to be fast and effective.

When we use javascript and HTML to build applications, you must bind the view to the model using JS functions and objects. But if you think these two-way data binding in a practical industrial application same approach becomes tedious with lengthy codes. That is one of the major reasons why there was a need to learn and develop AngularJS.

Time to learn some basic concepts before start developing applications in which AngularJS is built upon:

  • Model: The model contains data, objects, and logic.
  • View: Itis the visual presentation of an application which is also called a user interface.
  • View to Model two way Binding: The javascript object, i.e. the object you want to bind to an Html DOM for, e.g. a textbox, input or any Html tags and vice versa, can be done easily by using some pre-defined AngularJS libraries.
  • Controllers: Controllers are javascript functions that connect the model and the view.
  • Services: AngularJS services are javascript functions that perform specific tasks or functionalities maintained and tested by javascript. Some of the example of services are $scope, $http, $rootScope.
  • Expressions: Expressions are used to bind data with Html. This feature is also known as interpolation. Expressions are written with {{ expression }} curly braces. Expressions get evaluated and can be written without html tags.
  • Modules: Modules works as a container containing different parts of the angular application such as controller, services, directives, etc.

Directives and Scope

Let us focus on some pre-defined directives and how they work. Most of this directive starts with ‘ng’ taken from Angular.

1. Scope

  • The scope defines the javascript object with which data can be accessible from Model to HTML. Scope works as a connector between the two.
  • Some scope services are $scope, $rootScope. ‘$’ defines that these services are pre-defined and cannot be modified. Remember, HTML is case-insensitive, but AngularJS is case-sensitive, so $Scope will throw an error as undefined.
  • It is required to declare these in our controller function, and angular will inject it automatically.

2. ng-controller

  • This directive is used to create an instance/object of the controller through which HTML DOM will communicate with the actual logic.
  • HTML says that any tag with a ‘-‘ will be ignored while creating Html DOM.
  • Once DOM is created, the Angular interpreter finds an ng-controller directive and creates an instance of the particular controller, also providing a $scope service.
  • There can be many ng-controller on a single HTML page.

3. ng-app

  • This directive acts as a container containing controllers, directives, filters, expressions, etc. It registers or starts the application or the module.
  • There exists only one ng-app in your Html. Under one ng-app, there can be many ng-controller.

This instantiates an application object with $rootScope service.

  • Thus, $rootScope variables/ functions are accessible in a complete application.

4. ng-model

  • ng-model is used to bind the data from html to the model object. It provides two-way binding.

5. ng-if

  • To execute conditional statements on Html tags, ng-if is used. If the condition goes false, then the DOM does not include that div on DOM.

6. ng-bind

  • Instead of using {{}} for interpolation, ng-bind can also be used.

7. ng-disabled

  • Based on a condition, an element in the view can be disabled.

8. ng-show

  • If the given condition for ng-show is true, then the particular element is shown on the DOM.

9. ng-hide 

  • If the given condition for ng-hide is true, then the particular element will remain hidden in the DOM.

10. ng-repeat

  • It will repeat the particular div or span on Html with the length of the array or list provided.

11. ng-click

  • On click event on the html element, it will perform the provided functionality or task.
Note: The best way to learn any language is to code it. So let’s see our first code.

Examples of AngularJS Version

Here are some of the examples given below:

Example #1

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>First Name: <input type="text" ng-model="fname"></p>
<p>Last Name: <input type="text" ng-model="lname"></p>
<p>Your name is: {{ fname +" "+ lname}}</p>
</div>
</body>
</html>

Output:

Angular 1

There are some points to focus on from the above coding snippet:

  • In line 3, an angular.min.js file is added to the page, which will load all the required libraries for running the AngularJS application.
  • AngularJS majorly has 2 libraries, angular.js, and a compressed version of this file as angular.min.js.
  • In line 5, you can see the directive as ng-app, which is ignored by Html while creating Html DOM and taken up by AngularJS as one of its directives to start the application.
  • In line 6,7, the ng-model is used to bind the text you will enter into the textbox to the variables fname and lname. Remember, these variables are case sensitive.
  • In line 8, you see the expression {{fname +” “+ lname }} which angular will evaluate and display the data that you enter in text boxes. This is known as interpolation.

Example #2

Let us explore by one more example:

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('CustomerApp', []);
controller('firstController', function($scope){
$scope.customerName = 'Joe';
$scope.customerAge = '26';
});
</script>
<body>
<div ng-app="CustomerApp" ng-controller="firstController">
<p>First Name: <input type="text" ng-model="customerName"></p>
<p>Last Name: <input type="text" ng-model="customerAge"></p>
<p>Customer name is {{ customerName }} and age is {{ customerAge}}</p>
</div>
</body>
</html>

Output:

what is angularjs 1

In this example, in line 5, an app is created with the name CustomerApp, including all the application parts. At the very next line, a controller is created and given the name as firstcontroller. $scope is declared as a function parameter. AngularJS will inject it automatically into the application for direct use; the developer doesn’t have to create it explicitly.

This feature is known as dependency injection. In a similar manner, the ng-controller is used for the same controller under the ng-app tag. Remember the scope of the app or controller will be where upto the div ends or anything you define an app or controller into. In this case, you cannot access the controller or application after line 16.

Recommended Articles

We hope that this EDUCBA information on “What is AngularJS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

  1. AngularJS Architecture
  2. Angular JS Application
  3. AngularJS Unit Testing
  4. Career In AngularJS

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW