EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial What is AngularJS
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

What is AngularJS

By Priya PedamkarPriya 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.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,198 ratings)

Versions of AngularJS

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

This is a guide to What is AngularJS Version. Here we discuss the Versions of AngularJS with directives, scope, and how does AngularJS work. You may also have a look at the following articles to learn more –

  1. AngularJS Architecture
  2. Angular JS Application
  3. AngularJS Unit Testing
  4. Career In AngularJS
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

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

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

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

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

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

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

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

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more