Scribd
Upload
113 views13 pages

Angular Js

AngularJS is an open-source JavaScript framework maintained by Google that extends HTML with directives to bind data to HTML and register behaviors. Key directives include ng-app to define an AngularJS application, ng-model to bind the value of HTML controls to application data, and ng-bind to bind application data to the HTML view. Modules contain AngularJS applications and controllers, which are JavaScript objects that define properties and functions to access data through the $scope service. Two-way data binding updates and displays data by binding values and application variables to HTML controls.

Uploaded by

Sanaullah
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
113 views13 pages

Angular Js

AngularJS is an open-source JavaScript framework maintained by Google that extends HTML with directives to bind data to HTML and register behaviors. Key directives include ng-app to define an AngularJS application, ng-model to bind the value of HTML controls to application data, and ng-bind to bind application data to the HTML view. Modules contain AngularJS applications and controllers, which are JavaScript objects that define properties and functions to access data through the $scope service. Two-way data binding updates and displays data by binding values and application variables to HTML controls.

Uploaded by

Sanaullah
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/ 13

Introduction

• AngularJs is open source JavaScript framework


maintained by Google
• AngularJS is an extremely powerful tool for
applications that need to display complex data in
a browser UI, such as continuous integration
frameworks or product dashboards.
• AngularJS has extensive support for most
common mobile browsers (Android, Chrome
Mobile, iOS Safari).
• AngularJS has powerful animation support.
• Based on MVC (Model, View,Controller)
Directives
• Directives are a unique and powerful feature
available in AngularJS.
• Directives let you invent new HTML syntax,
specific to your application.
• AngularJS extends HTML with ng-directives.
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.
Example
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an
gular.min.js"></script> Bind value to application
<body> div is owner of AngularJs
application
variable name e.g. value of field
will be bound to variable name
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div> Bind the inner HTML to
Variable name: e.g Display data

</body>
</html>
Directives
• ng-init
– This directive Binds application data to HTML controls e.g.two
variables have been initialized in following html
• <div ng-app = "" ng-init = “ fname=Sara; lname=Ali”>
• ng-model
– Binds application data to control e.g. value of input field is
assigned to variable name
• <p>Enter your Name: <input type = "text" ng-model =
"name"></p>
• ng-bind
– This directive Binds the model to HTML view
• <p>Hello <span ng-bind = "name"></span>!</p>
Directives
• ng-repeat
– The ng-repeat directive actually works in iterative
manner
• <div ng-app="" ng-init=“students=[
{name:‘Ali',age:20},
{name:Ahmed',age:20},
{name:‘Sara',age:20}]">
<ul>
<li ng-repeat="x in students">
{{ x.name + ', ' + x.age}}
</li>
</ul>
</div>
Modules
• Module, in AngularJs, is container for application and
controller
• Module contains application and it’s controllers
• Application module
<script>
var app = angular.module("myApp", []);
</script>
• Controller
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = “Abc";
$scope.lastName = “Xyz";
});
</script>
Controllers
• Controller is a Javascript object
– properties and functions
<script>
Guess technique
var mainApp = angular.module(“myApp", []);
mainApp.controller(‘testController', function($scope) {
$scope.student = { firstName: “Abc", lastName: "xyz",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}); </script>
Controllers
• Use defined application and controller in
HTML
<html>
<head> <title></title>
</head>
<div ng-app = "mainApp" ng-controller = " testController ">
first name: <input type = "text" ng-model =
"student.firstName">
Enter last name: <input type = "text" ng-model =
"student.lastName">
You are entering: {{student.fullName()}}
</div>
</body>
</html>
Controllers
• $scope is a JavaScript object
• Model data is contained by $scope so in a
controller data is accessed through $scope
• Functions can be defined with $scope
Data Model
• Collection of variables for application.
• Data model belongs to a particular application
• Two way binding:
– Data is updated by getting values from html
controls
– Data id displayed by binding it with HTML controls
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model=“firstname">
<h1>You entered: {{firstname}}</h1>
</div>
• <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>

You might also like