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 is that achieved will be deeply explained further but for now you just remember these terminologies. In this topic, we are going to learn about AngularJS Version.
Versions of AngularJS
AngularJS is the Angular 1.x versions 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 will have to bind the view to model by 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 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 task or functionality which is 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 of the pre-defined directives and how they actually work. Most of this directive starts with ‘ng’ taken from Angular
4.5 (2,700 ratings)
View Course
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 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 in 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 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 array or list provided.
11. ng-click
- On click event on the html element, it will perform the provided functionality or task.
Tip: 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
<!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:
First Name: Joseph
Last Name: Alex
Your name is: Joseph Alex
There are some points to focus from above coding snippet:
- At line 3 an angular.min.js file is added into the page which will load all the required libraries for running AngularJS application.
- AngularJS majorly has 2 libraries angular.js and a compressed version of this file as angular.min.js.
- At 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 directive to start the application.
- At line 6,7 ng-model is used which will bind the text you will enter into the textbox to the variables fname and lname. Remember these variables are case sensitive.
- At 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.
Let us explore by one more example:
<!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>
In this example, at line 5 an app is created with the name CustomerApp which will include all the parts of the application. At the very next line, a controller is created and given 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 –
