Main points about AngularJS

AngularJS is a JavaScript framework

AngularJS can be added to an HTML page with only aDirectives, while binds data to HTML with Expressions.

AngularJS a JavaScript Framework

AngularJS is a library written in JavaScript so AngularJS is a Javascript framework.

AngularJS can be added to any HTML webpage with the below CDN just like the Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

How AngularJS Extends HTML

AngularJS extends HTML using ng-directives.

Below are the basic 3(Three) ng-directives  of AngularJS

  1. The ng-app directive which defines AngularJS application.
  2. The ng-model directive fixes the value of HTML controls such as input, select, textarea to application data.
  3. The ng-bind directive muddles application data to the HTML view.

AngularJS Basic Example

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

Explanation of example above

AngularJS CDN starts angularjs script automatically when the web page have been loaded.

The ng-app directive in the <html> tag communicates with AngularJS that the web page element is the “possessor” of the AngularJS application.

The ng-model directive muddles the value of the input field to the application variable name.

The ng-bind directive fixes the innerHTML of the <p> element to the application variable name.

Other Directives of AngularJS

Note:  AngularJS directives are just HTML attributes which has an ng prefix.

The ng-init or data-ng-init directive as the name implies initializes AngularJS application variables.

AngularJS Example for ng-init

<section ng-app="" ng-init="fullName='pete'">
<p>The name is <span ng-bind="fullName"></span></p>
</section>

Alternatively with valid HTML:

AngularJS Example for ng-init

<section data-ng-app="" data-ng-init="fullName='Pete'">
<p>The name is <span data-ng-bind="fullName"></span></p>
</section>

Note: You can either write data-ng-, instead of ng-, both works on your page but the data-ng- makes your page HTML valid.

AngularJS Expressions

Double braces symbol: {{ expression }} encloses AngularJS expressions.

AngularJS outputs data accurately wherever the expression is written.

Example for the AngularJS Expressions

<!DOCTYPE html>
<html ng-app >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <p>Expression: {{ 5 + 5 }}</p>
</body>
</html>

Most important is that AngularJS expressions fixes  AngularJS data to HTML same method in which the ng-bind directive does.

Example AngularJS Expression

<!DOCTYPE html>
<html ng-app >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</body>
</html>

Applications in AngularJS

There are two(2) basic applications in AngularJS

  • AngularJS modules which defines AngularJS applications.
  • AngularJS controllers that controls AngularJS applications.

The ng-app directive defines the application, the ng-controller directive defines the controller.

Example for AngularJS Application

<section ng-app="Apps" ng-controller="sCtrl">
Surame: <input type="text" ng-model="surName"><br>
maiden name: <input type="text" ng-model="maidenName"><br>
<br>
Full Name: {{ surName + " " + maidenName}}
</section>
<script>
var app = angular.module('Apps', []);
app.controller('sCtrl', function($scope) {
    $scope.surName= "Pete";
    $scope.maidenName= "Didi";
});
</script>

Explanation of the example

AngularJS modules defines the application

AngularJS Module

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

AngularJS controllers controls the application

AngularJS Controller

app.controller('sCtrl', function($scope) {
    $scope.surName= "Pete";
    $scope.maidenName= "Didi";
});

LEAVE A REPLY

Please enter your comment!
Please enter your name here