Scribd
Upload
30 views12 pages

Angular

AngularJS is a JavaScript framework that extends HTML with directives and binds data to HTML with expressions. It extends HTML attributes and binds data to HTML. AngularJS uses modules, scopes, filters, ng-repeat, ng-if, ng-hide/ng-show, and ng-click to build dynamic and interactive web applications.

Uploaded by

kaldalsadx
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
30 views12 pages

Angular

AngularJS is a JavaScript framework that extends HTML with directives and binds data to HTML with expressions. It extends HTML attributes and binds data to HTML. AngularJS uses modules, scopes, filters, ng-repeat, ng-if, ng-hide/ng-show, and ng-click to build dynamic and interactive web applications.

Uploaded by

kaldalsadx
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/ 12

Angular

What is Angular ‫ما هو االنجلر‬

 AngularJS is a JavaScript framework. It can be added to an HTML page with a


<script> tag.
HTML ‫ بيئة عمل او اطار للجافا سكربت يمكن اضافتها لـ‬

 AngularJS extends HTML attributes with Directives, and binds data to HTML
with Expressions.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
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.
 The ng-init directive initializes application data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
‫تستخدم للتعريف بأن هنالك برنامج انجلر جي اس‬
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
‫ او من داخل‬HTML ‫تستخدم لتعريف متغير يمكن تغيير قيمته من الـ‬
‫سكربت انجلر‬
</body>
</html> ‫تعريف متغير يمكن تغيير قيمته من مكان واحد فقط من السكربت‬
‫او من اإلتش تي ام ال‬
AngularJS Expressions

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

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

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

</body>
</html>
AngularJS Modules

 The module is a container for the different parts of an application.

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


{{ firstName + " " + lastName }}
</div>

<script>

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

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

</script>
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.

<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 Filters

 currency Format a number to a currency format.


 date Format a date to a specified format.
 filter Select a subset of items from an array.
 json Format an object to a JSON string.
 limitTo Limits an array/string, into a specified number of
elements/characters.
 lowercase Format a string to lower case.
 number Format a number to a string.
 orderBy Orders an array by an expression.
 uppercase Format a string to upper case.
AngularJS Filters
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>

<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script> The name is DOE

</body>
</html>
ng-repeat
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>

</body>
ng-if

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">


<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
ng-hide - ng-show

Hide HTML: <input type="checkbox" ng-model="myVar">


<div ng-hide="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
ng-click
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>

You might also like