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