angularjs-intro
angularjs-intro

Main points about AngularJS

AngularJS is a JavaScript framework

AngularJS can be added to an HTML-element-content-using-javascript/">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 using ng-directives.

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

  1. The ng-app directive which defines .
  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.

<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.

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