What is mean by AngularJS Directives ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
AngularJS directives are extended HTML attributes with an ng prefix. For example, the ng-init directive initializes AngularJS application variables.

Sample AngularJS code snippet is given below:

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

AngularJS Expressions with Arrays by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

,
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS arrays are like JavaScript arrays.

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The points are {{ points[2] }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The points are <span ng-bind="points[2]"></span></p>

</div>

AngularJS Expressions with Objects by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

,
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS objects are like JavaScript objects.

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

AngularJS Expressions with Strings by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

,
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS strings are like JavaScript strings.

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

We can also rewrite the above code using ng-bind as below:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

AngularJS Numbers using AngularJS Binding | AngularJS Interview Question and Tutorials

,
AngularJS numbers are like JavaScript numbers. Using ng-bind, we can bind the AngularJS numbers.
The below angularJS code snippet gives an example of AngularJS numbers using ng-bind

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

AngularJS Expressions with Numbers by Example | AngularJS Interview Question | AngularJS Programmer Guide and Tutorials

,
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS numbers are like JavaScript numbers.

AngularJS Numbers by Example

 <div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

What is the Use of AngularJS Controllers ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
AngularJS applications are controlled by controllers. The ng-controller directive defines the controller. The controller code will execute when the page loads.

AngularJS Controller by Example

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

Brief about AngularJS Expressions with Example ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng-bind directive. AngularJS will "output" data exactly where the expression is written. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

AngularJS Expressions by Example

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

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

</body>
</html>

How to make AngularJS Compatible with HTML5 ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
AngularJS directives are HTML attributes with an ng prefix. You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Give a Basic Example of AngularJS ? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
Below is the simple HTML that is extended with AngularJS

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

AngularJS starts automatically when the web page has loaded.

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 innerHTML of the <p> element to the application variable name.

What is the main Function of AngularJS? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
Below are the main functionality of AngularJS.

  • AngularJS extends HTML with ng-directives.
  • The ng-app directive defines an AngularJS application.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-bind directive binds application data to the HTML view.

What is AngularJS? | AngularJS Tutorial | AngularJS Interview Question | AngularJS Programmer Guide

,
AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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