angularjs,javascript,jquery,AngularJS,html, About to AngularJS (Intro), Shopinson, Shopinson

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";
});
2 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

shopinson-logo-32

©2020 Shopinson: complete guide to programming language

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account