What is AngularJS?
August 30, 2021 2021-08-30 17:43What is AngularJS?
What is AngularJS?
Introduction to AngularJS
AngularJS was originally developed by Misko Hevery and Adam Abrons in 2008-2009 and is now maintained by Google. It is a JavaScript-based open-source front-end structure made by Google for making dynamic and modern-day web applications. This framework creates Single Page Applications which acquired a gigantic foothold over time for disposing of superfluous code and ensuring lighter and quicker applications. Development and testing of applications can be done in Angular js through model–view–controller (MVC) and model–view–view model (MVVM) architectures. Angular js supports various platforms like mobile, web, and desktop natives. Angular js gets its name from the HTML tags which are enclosed by angle brackets.
Examples of AngularJS
Example 1
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="exampleApp" ng-controller="exampleCtrl">
<p>Input the language you are learning</p>
Name of the language: <input ng-model="language">
<p>I am learning: {{language}}</p>
</div>
<script>
var app = angular.module('exampleApp', []);
app.controller('exampleCtrl', function($scope) {
$scope.language = "";
});
</script>
</body>
</html>
Output:
In the above code, if we try to change the ‘Name of language’ textbox the same text will come in the view part i.e ‘I am learning’ textbox too. The behavior of the expression “{{language}}” in the above code is because it is bound with the directive ‘ng-model=” language”’.
Example 2
var app = angular.module(“example-module”, []);
Here in the above example, [] this can be used to add a list of components that will be using this module. The name of the module comes first and then we write all the components that we want to add in [].
<div ng-app = “example”>
The code in which the module is required.
</div>
The module which we had created earlier can be attached with any tag and then by adding it to the list of modules. Over here we have added it in the div tag.
In addition to different types of directives in AngularJS, we can create our own directives too. We can create a new directive by using the .directive function. By creating an HTML element with the same tag name as the directive name we can invoke the newly created directive.
Example 3
<body ng-app="exampleApp">
<example-directive></example-directive>
<script>
var app = angular.module("exampleApp", []);
app.directive("exampleDirective", function() {
return {
template : "<h1>This is my directive!</h1>"
};
});
</script>
</body>
Output:
Here in the above example as you can see, while naming a new directive we are using camel case (exampleDirective), but when we are trying to invoke it we separate it by ‘-‘ (example-directive). We can invoke the directive by using :
Element name: <example-directive></ example-directive>
Attribute: <div example-directive></div>
Class: <div class=” example-directive”></div>
Features of Angular JS
1) Data Binding
Data binding is the synchronization of data between business logic and view of the application. Model part and view part serve as a bridge between two components of angular. Data binding is automatic and gives an approach to wire the two significant pieces of an application that is the UI and application information. Whenever a few changes are done at the model side it is reflected on the view side as well and the other way around is likewise conceivable. This occurs so quickly to ensure that view and the model part are updated constantly. Angular js uses a directive to bind the value of input fields to an HTML element.
Types of data bindings:
i) One-way data binding
In this type of data binding, the data flows from model to view. If some changes are done in the model part, then it will reflect in the view part. But if any change is done in the view part then it will not be reflected in the model part as it is unidirectional in nature.
ii) Two-way data binding
In this type of data binding, the flow of data is bidirectional. If we make any changes in the model part then these changes will be reflected in the view part. Also if we make any changes in the view part then these changes will also be reflected in this type of data binding.
2) Modules
Angular js modules partition your web application into small, reusable, and functional components which can be incorporated with other web applications. Every module is distinguished by a unique name and can be reliant on different modules. It is a container that comprises various parts like controllers, services, directives.
3) Directives
If you want to extend HTML with the new attributes, then angular js lets you extend it with directives. To offer various functionalities in your applications AngularJS has some built-in directives. You can also define your own directives. These directives are extended HTML attributes with the prefix ‘ng-‘.
- ng-app: With the help of ng-app directive we can define the root element in our application. Initialization of this directive is done at the time of page load. This directive helps us to load different kinds of modules in our application.
Scope in AngularJS
AngularJS is a booming language and is widely being used for frontend development. With the features and ease that it provides many companies prefer this language for development. There is a lot of scope for developers who want to upgrade. Learning AngularJS can help you get many jobs.
Advantages of AngularJS:
1) Wide Developer Support
It is developed by Google. Its framework is built by a group of committed developers. You have the option of getting guidance from profoundly skilled engineers.
2) Easy Starting Up
The setup process is quite simple and fast. Initially, we just add some attributes in our HTML, and by doing that we can get started.
3) Inclusive
By using AngularJS we can do rapid front-end development as it offers broad solutions. It has various inbuilt features in it which are quite useful for developers. It has many features like dependency injection, filters, DOM attributes.
4) Relief from DOM manipulation
Comparing AngularJS with other popular javascript frameworks, they have to actively update DOM but in angular, we don’t have to worry about DOM updation. Because of two-way data binding developers are relieved from continuous DOM updation. Due to this a lot of time is saved by a developer which leads to more productivity and focuses on work.
