Introduction to AngularJS

AngularJS is a Javascript open-source front-end structural framework that is mainly used to develop single-page web applications(SPAs). It is a continuously growing and expanding framework which provides better ways for developing web applications. It changes the static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwise. AngularJS is rapidly growing and because of this reason, we have different versions of AngularJS with the latest stable being 1.7.9. It is also important to note that Angular is different from AngularJS. It is an open-source project which can be freely used and changed by anyone. It extends HTML attributes with Directives, and data is bound with HTML.

History of AngularJS: AngularJS was originally developed in 2008-2009 by Miško Hevery and Adam abrons at Brat Tech LLC, as software for the online JSON storage service, in order to ease to development of the applications for the enterprise, that has been valued by the megabyte. It is now maintained by Google. AngularJS was released with version 1.6, which contains the component-based application architecture concept. This release version removed the Sandbox, which facilitates the security, despite having the various vulnerabilities that have evolved, which bypassed the sandbox.

Why use AngularJS?

Key Features: There are numerous features of AngularJS that contribute to creating efficient applications. Some of the features are described below:



Normally, when we talk about MVC architecture, we have to split our applications into these three components and then write the code to connect them. However, in AngularJS, all we have to do is split the application into MVC and it does the rest by itself. It saves a lot of time and allows you to finish the job with less code. 

Benefits of AngularJS:

Depending Injection: Dependency Injection is a software design pattern. It works on the basis of Inversion of Control. Inversion control means objects do not create other objects. Instead, they get these objects from an outside source. The dependent object is not created by the primary object after that then uses its methods. Instead, an external source creates the dependent object and gives it to the source object for further usage. On the basis of dependency injection, we create a service to acquire all the information from the database and get into the model class. 

In Angular.JS, dependencies are injected by using an “injectable factory method” or “constructor function”. These components can be injected with “service” and “value” components as dependencies. The $http service is normally defined from within the controller in the following manner.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Example: This example illustrates the basic Angular JS by implementing the directive, controller, etc.




<!DOCTYPE html>
<html>
  
<head>
    <title>AngularJS Example</title>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>AngularJS Example</h3>
        <div ng-app="myApp" 
             ng-controller="myCtrl"
             ng-style="gfgObj">
            <input type="text" 
                   ng-model="comName">
            <input type="text" 
                   ng-model="detail">
            <br> {{comName + " "+detail }}
        </div>
    </center>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.comName = "GeeksforGeeks";
            $scope.detail = "Learning Together!"
            $scope.gfgObj = {
                "color": "green",
                "font-family": "sans-serif",
                "font-size": "25px"
            }
        });
    </script>
</body>
</html>

Output:

 

Pros of AngularJS:

Cons of AngularJS:


Article Tags :