IMG-LOGO
Home Tutorial AngularJS Philosophy

AngularJS Philosophy

by MH RISHAD - 27 Oct 2019
IMG

AngularJS is one of best uses JavaScript framework. It is easily used into an HTML page with a tag <script>

AngularJS extends with HTML attributes, and play with data to HTML Expressions.

What is Angular JS ?

AngularJS is a JavaScript Framework

It is a JavaScript framework written in JS.

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

AngularJS Extends with HTML

AngularJS extends HTML with ng-directives.

Mainly ng-app directive defines an AngularJS application.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

See the Example

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

 

 

Example explained:

AngularJS starts when the web page has loaded and it’s automatically.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

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

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

AngularJS Directives

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initializes AngularJS application variables.

 

See the  Example

<div ng-app="" ng-init="FirstName='John'">
<p>First Name is <span ng-bind=" FirstName "></span></p>
</div>

Differently with valid HTML:

See Example

<div data-ng-app="" data-ng-init=" FirstName ='John'">
<p>First Name is <span data-ng-bind=" FirstName "></span></p>
</div>

 

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

You will learn a lot more about directives later in this tutorial.

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

 

See the Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
 
<div ng-app="">
  <p>First expression: {{ 2 + 3 }}</p>
</div>
 
</body>
</html>
See Example 2
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
 
<div ng-app="">
  <p>Your Name: <input type="text" ng-model="Your_Name"></p>
  <p>{{ Your }}</p>
</div>
</body>
</html>

 

AngularJS Applications

AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications.

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

 

See Example

<div ng-app="FirstApp" ng-controller="AppCtrl">
 
First Name: <input type="text" ng-model="FirstName"><br>
Last Name: <input type="text" ng-model="LastName"><br>
<br>
Full Name is : {{ FirstName + " " + LastName }}
 
</div>

 

<script>
var app = angular.module(AppCtrl, []);
app.controller(AppCtrl, function($scope) {
  $scope. FirstName = "John";
  $scope. LastName = "Smith";
});
</script>

AngularJS modules define applications:

AngularJS Module

var app = angular.module(AppCtrl, []);
AngularJS controllers control applications:
AngularJS Controller
app.controller(AppCtrl, function($scope) {
  $scope.FirstName= "John";
  $scope.LastName= "Smith";
});

Now keep Stay and wait for Next tutorial about Angular JS.

Thank You

Tags:
Share:

Leave a Comment

Required fields are marked *