Introduction to AngularJS

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

AngularJS extends HTML with ng-directives and binds data to HTML.

AngularJS is a JavaScript Framework

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="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

| | We recommend placing the script at the bottom of the <body> element. <br>This improves the loading speed of the web page, as the HTML loading is not blocked by the script loading. | | --- | --- |

Download different versions of angular.js: https://github.com/angular/angular.js/releases

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.

The ng-model directive binds the value of HTML elements (like input fields) to the application data.

The ng-bind directive binds the application data to the HTML view.

AngularJS Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

</body>
</html>

Example explanation:

When the web page loads, AngularJS automatically starts.

The ng-app directive tells AngularJS that the <div> element is the "owner" of the 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 paragraph to the application variable name.

| | If you remove the ng-app directive, HTML will display the expression without calculating its result. | | --- | --- |

What is AngularJS?

AngularJS makes it easier to create modern single-page applications (SPAs: Single Page Applications).

AngularJS binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and show HTML elements.
AngularJS can add code behind HTML elements.
AngularJS supports input validation.

AngularJS Directives

As you can see, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initializes AngularJS application variables.

AngularJS Example

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

<p>Name: <span ng-bind="firstName"></span></p>

</div>

| | HTML5 allows extended (custom) attributes prefixed with data-. <br>AngularJS attributes are prefixed with ng-, but you can use data-ng- to make your page HTML5 valid. | | --- | --- |

With valid HTML5:

AngularJS Example

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

<p>Name: <span data-ng-bind="firstName"></span></p>

</div>

AngularJS Expressions

AngularJS expressions are written in double curly braces: {{ expression }}.

AngularJS expressions bind data to HTML, similar to 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.

Example: {{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

</body>
</html>

AngularJS Application

An AngularJS module defines an AngularJS application.

An AngularJS controller controls an AngularJS application.

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

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">

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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS module definition:

AngularJS Module

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

AngularJS controller definition:

AngularJS Controller

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

You will learn more about applications and modules in the next tutorials.

❮ Ng Ng Cut Angularjs Tutorial ❯