Scribd
Upload
85 views26 pages

Web Persentation

AngularJS is a JavaScript framework that extends HTML with new attributes and binds data to HTML. It allows building single page web applications. AngularJS uses directives that start with "ng-" to extend HTML elements with additional functionality. Expressions written inside double curly braces bind data to the HTML. AngularJS also uses controllers to control applications and scopes to share data between controllers and views.

Uploaded by

Maliknaeem Maria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
85 views26 pages

Web Persentation

AngularJS is a JavaScript framework that extends HTML with new attributes and binds data to HTML. It allows building single page web applications. AngularJS uses directives that start with "ng-" to extend HTML elements with additional functionality. Expressions written inside double curly braces bind data to the HTML. AngularJS also uses controllers to control applications and scopes to share data between controllers and views.

Uploaded by

Maliknaeem Maria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Angular Javascript

Naeem naseer roll#24


Sania mukhtiar roll#16
Angular Javascript
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications
(SPAs)
AngularJS is easy to learn.
AngularJS is a JavaScript framework. It can be added
to an HTML page with a <script> 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.
6.4/angular.min.js"></script>
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

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/
angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Example explained:
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.
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
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-
bind="firstName"></span></p>

</div>
AngularJS Expressions

AngularJS expressions are written inside double


braces: {{ expression }}.
AngularJS will "output" data exactly where the
expression is written:
AngularJS Example

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/
angular.min.js"></script>
<body>

<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</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.
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

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


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

The scope is the binding part between the HTML


(view) and the JavaScript (controller).
The scope is an object with the available properties
and methods.
The scope is available for both the view and the
controller.
How to Use the Scope?
When you make a controller in AngularJS, you pass the $scope object as an argument:
Example
Properties made in the controller, can be referred to in the view:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>

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

app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});

</script>
AngularJS Tables
Displaying Data in a Table
<div ng-app="myApp" ng-controller="customersCtrl">

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
Displaying with CSS Style

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
Display the Table Index ($index)

To display the table index, add a <td> with $index:


AngularJS Example
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
Using $even and $odd

<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{
x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{
x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
AngularJS Forms

Input Controls
Input controls are the HTML input elements:
input elements
select elements
button elements
textarea elements
Data-Binding
Input controls provides data-binding by using the ng-
model directive.
<input type="text" ng-model="firstname">
The application does now have a property named
firstname.
The ng-model directive binds the input controller to
the rest of your application.
The property firstname, can be referred to in a
controller:
Example

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
Checkbox

A checkbox has the value true or false. Apply the ng-


model directive to a checkbox, and use its value in your
application.
Example
Show the header if the checkbox is checked:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>


Radiobuttons
Bind radio buttons to your application with the ng-model
directive.
Radio buttons with the same ng-model can have different values,
but only the selected one will be used.
Example
Display some text, based on the value of the selected radio
button:
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Selectbox
Bind select boxes to your application with the ng-model
directive.
The property defined in the ng-model attribute will have the
value of the selected option in the selectbox.
Example
Display some text, based on the value of the selected option:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
An AngularJS Form Example

Application Code
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
Application Code

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName:
"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>

You might also like