اَن گُرول جی ایس معرفی
- پچھلے پیج اَن گُرول جی ایس تیچرس
- پچھلے پیج اَن گُرول جی ایس ایکسپریشن
آئیجل جی ایس ایک جی ایس فریم ورکاس کو ایک <script> تیگ کے ذریعہ ایچ تی ام ال پیج میں شامل کیا جاسکتا ہے。
آئیجل جی ایس کے ذریعہامرایچ تی ام ال کی اپنی کوالٹیو کو توسیع دی اور اس کا استعمالایکشنڈاٹا کو ایچ تی ام ال سے بائینڈ کرتا ہے
آئیجل جی ایس ایک جی ایس فریم ورک ہے
آئیجل جی ایس جی ایس سے لکھا ہوا جی ایس فریم ورک ہے
آئیجل جی ایس جی ایس فائل کی شکل میں فراہم کی جاتی ہے اور اس کو اس ویب پیج میں اسکریپٹ تیگ کے ذریعہ شامل کیا جاسکتا ہے:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
آئیجل جی ایس نے ایچ تی ام ال کو توسیع دی ہے
آئیجل جی ایس استعمال کرتا ہے ng-امرآئیجل جی ایس نے ایچ تی ام ال کو توسیع دی ہے。
ng-app آئیجل جی ایس کا امر، آئیجل جی ایس آپلیکیشن کا تعریف کرتا ہے。
ng-model آئیجل جی ایس کا امر، آپلیکیشن کا ڈاٹا بائینڈ کرتا ہے。
ng-bind آئیجل جی ایس کا امر، آپلیکیشن کا ڈاٹا بائینڈ کرتا ہے。
اَن گُرول جی ایس مثال
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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> </body> </html>
مثال کی تفسیر:
جب ویب سائٹ لوڈ ہوجائیگی، آئیجل جی ایس خودکار طور پر چالو ہوجائیگا。
ng-app آئیجل جی ایس کا آپلیکیشنکا مالک
ng-model آئیٹم کا مالیک کا مالکیت name.
ng-bind کماندها محتوای علامت <p> را به متغیر برنامه پیوند میزنند. name.
اَن گُرول جی ایس ایندیکیشن
همانطور که دیدید، کماندهای AngularJS دارای ng ویژگیهای HTML با پیشوند
ng-init کماندها متغیرهای برنامه AngularJS را�始化 میکنند.
اَن گُرول جی ایس مثال
<div ng-app="" ng-init="firstName='Bill'"> <p>نام او <span ng-bind="firstName"></span></p> </div>
یا از HTML معتبر استفاده کنید:
اَن گُرول جی ایس مثال
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>نام او <span data-ng-bind="firstName"></span></p> </div>
اگر میخواهید HTML صفحه شما معتبر باشد، میتوانید از data-ng- به جای ng-.
شما در بخش بعدی این آموزش بیشتر درباره کماندها یاد خواهید گرفت.
اَن گُرول جی ایس ایکسپریشن
عبارات AngularJS در درون دو گوشه بزرگ نوشته میشوند:{{ expression }}.
AngularJS دادهها را در مکان عبارت قرار میدهد که
اَن گُرول جی ایس مثال
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>عبارت اولین من:{{ 5 + 5 }}</p>
</div>
</body>
</html>
عبارات AngularJS دادههای AngularJS را به HTML پیوند میزند، با ng-bind روش کماند مشابه است.
اَن گُرول جی ایس مثال
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
شما در بخش بعدی این آموزش بیشتر درباره عبارات یاد خواهید گرفت.
اَن گُرول جی ایس ایپلی کیشن
AngularJS مودولتعریف برنامه AngularJS.
AngularJS کنترلگرکنترل برنامه AngularJS.
ng-app کماند تعریف برنامه،ng-controller کماند تعریف کنترلر.
اَن گُرول جی ایس مثال
<div ng-app="myApp" ng-controller="myCtrl">
نام:<input type="text" ng-model="firstName"><br>
نام: <input type="text" ng-model="lastName"><br>
<br>
پورا نام: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
اَن گُرول جی ایس ماڈول آپلی کیشن کا تعریف کرتا ہے:
اَن گُرول جی ایس ماڈول
var app = angular.module('myApp', []);
اَن گُرول جی ایس کنٹرولر کنٹرول آپلی کیشن:
اَن گُرول جی ایس کنٹرولر
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
آپ اس تیچرس کے بعد اکثر ماڈول اور کنٹرولر کے بارے میں معلومات حاصل کریں گے。
- پچھلے پیج اَن گُرول جی ایس تیچرس
- پچھلے پیج اَن گُرول جی ایس ایکسپریشن
