TUTORIAL HOME
AngularJS Introduction
❮ Previous Next ❯
AngularJS is a JavaScript framework. It can be added to an HTML page with a tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
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://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js“>
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 controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
AngularJS Example
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js“>
Name:
»
Example explained:
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the
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
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.
AngularJS Example
The name is </p>
»
Alternatively with valid HTML:
AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'”>
The name is </span>
»
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:
AngularJS Example
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js“>
My first expression: {{ 5 + 5 }}
»
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
AngularJS Example
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js“>
Name:
{{name}}
»
You will learn more about expressions later in this tutorial.
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.
AngularJS Example
First Name:
Last Name:
Full Name: {{firstName + ” ” + lastName}}
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
»
AngularJS modules define applications:
AngularJS Module
var app = angular.module(‘myApp’, []);
AngularJS controllers control applications:
AngularJS Controller
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
You will learn more about modules and controllers later in this tutorial.
❮ Previous Next ❯
shahzade bau 