YouTipName:
Hello {{name}}
` 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 application variable `name` to the innerHTML of a certain paragraph.
|  | If you remove the **ng-app** directive, HTML will display the expression directly without evaluating its result. |
| --- |
* * *
## What is AngularJS?
AngularJS makes it easier to develop modern Single Page Applications (SPAs).
* 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 prefixed with **ng**.
The **ng-init** directive initializes AngularJS application variables.
## AngularJS Example
[Try it »](#)
|  | HTML5 allows custom attributes prefixed with **data-**. AngularJS attributes are prefixed with **ng-**, but you can use **data-ng-** to make the page valid for HTML5. |
| --- |
Valid HTML5:
## AngularJS Example
[Try it »](#)
* * *
## AngularJS Expressions
AngularJS expressions are written inside double curly braces: **{{ expression }}**.
AngularJS expressions bind data to HTML, similar to the **ng-bind** directive.
AngularJS will "output" the data where the expression is written.
**AngularJS expressions** are very similar to **JavaScript expressions**: they can contain literals, operators, and variables.
Example: `{{ 5 + 5 }}` or `{{ firstName + " " + lastName }}`
## AngularJS Example
[Try it »](#)
* * *
## AngularJS Application
AngularJS **modules** define AngularJS applications.
AngularJS **controllers** control AngularJS applications.
The **ng-app** directive defines the application, and the **ng-controller** directive defines the controller.
## AngularJS Example
Name is
Name is
My first expression: {{ 5 + 5 }}
First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });
[Try it »](#)
The AngularJS module defines the application:
## AngularJS Module
var app = angular.module('myApp', []);
The AngularJS controller controls the application:
## AngularJS Controller
app.controller('myCtrl', function($scope){ $scope.firstName= "John"; $scope.lastName= "Doe"; });
In the following tutorials, you will learn more about applications and modules.Last Name:
Full Name: {{firstName + " " + lastName}}