Introduction to Angular JS

By: Varghese Chacko 1 year ago

Angular JS logoAngular JS is a framework in JavaScript. It is distributed as a JavaScript file and could be included in any HTML page with script tag. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script> The angular JS extends the HTMLwith directives. The key directives are ng-app which defines the AngularJS application, the ng-model directive which bids value of HTML controls like input widgets to the app and ng-bind binds application data to the HTML.

A common example yu may find on web is

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Here ng-app directive tells AngularJS that the dive element is the owner of the app, ng-model binds the input field to application variable name and ng-bind binds the variable name to the HTML. Another directive ng-init is used to initialize the app variable, for example

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <body>
        <div ng-app="" ng-init="name='ATEMON'">
            <p>Name: <input type="text" ng-model="name"></p>
            <p ng-bind="name"></p>
        </div>
    </body>
</html>

The use of ng- makes the HTML invalid to W3C HTML validators. To make it valid, we can ue data-nag, for example

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <body>
        <div data-ng-app="" data-ng-init="name='ATEMON'">
          <p>Name: <input type="text" data-ng-model="name"></p>
          <p data-ng-bind="name"></p>
        </div>
    </body>
</html>

Expressions in Angular JS is written inside double braces. {{ }}. Angular JS will output the expression exactly where the expression is written.

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <body>
        <div data-ng-app="" data-ng-init="name='ATEMON'">
            <p>Name: <input type="text" data-ng-model="name"></p>
            <p data-ng-bind="name"></p>
            <p >The company name is : {{name}}</p>
        </div>
    </body>
</html>

Here it will output "The company name is : ATEMON" and will workwhen the data from input is changed.

AngularJS modules API defines the application where as controller API defines the controllers of the applications. They are used by binding with directives ng-app and ng-controller. Firs, we need to define the angular application as

var app = angular.module('myApp', []);

Here we name the application as MyApp. Now we define the conroller as

app.controller('myCtrl', function($scope) {
    $scope.name= "ATEMON";
    $scope.tagline= "Get your project engineered.";
});

The HTML for the app could be

<div ng-app="myApp" ng-controller="myCtrl">

Company Name: <input type="text" ng-model="name"><br>
Tag Line: <input type="text" ng-model="tagline"><br>
<br>
{{name + " - " + tagline}}

</div>

The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller. When you make a controller in AngularJS, you inject the $scope object as an argument.

Puting them all together,

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myApp', []);

            app.controller('myCtrl', function($scope) {
                $scope.name= "ATEMON";
                $scope.tagline= "Get your project engineered.";
            });
        </script> 
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">

        Company Name: <input type="text" ng-model="name"><br>
        Tag Line: <input type="text" ng-model="tagline"><br>
        <br>
        {{name + " - " + tagline}}

        </div>
    </body>
</html>