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
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.
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:
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:
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 –
