مقدمه‌ای بر AngularJS
- صفحه قبلی آموزش AngularJS
- صفحه بعدی عبارت‌های AngularJS
AngularJS یک چارچوب JavaScriptمی‌تواند با استفاده از یک تگ <script> به صفحه HTML اضافه شود.
AngularJS از طریقدستورویژگی‌های HTML را گسترش می‌دهد و ازعبارتداده‌ها را به HTML پیوند می‌دهد.
AngularJS یک چارچوب JavaScript است
AngularJS یک چارچوب JavaScript نوشته شده به زبان JavaScript است.
AngularJS به صورت فایل JavaScript توزیع می‌شود و می‌توان آن را با استفاده از تگ script به صفحه وب اضافه کرد:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS HTML را گسترش می‌دهد
AngularJS از دستور ng-HTML را گسترش می‌دهد.
ng-app دستور یک برنامه AngularJS تعریف می‌کند.
ng-model دستور ارزش‌های کنترل‌های HTML (input, select, textarea) را به داده‌های برنامه پیوند می‌دهد.
ng-bind دستور داده‌های برنامه را به نمایه HTML پیوند می‌دهد.
مثال‌های 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>
توضیح مثال:
وقتی صفحه وب بارگذاری شد، AngularJS به طور خودکار شروع به کار می‌کند.
ng-app دستور به AngularJS می‌گوید که عناصر <div> در AngularJS برنامهمالکیت
ng-model دستور برای پیوند دادن ارزش فیلدهای ورودی به متغیرهای برنامه name。
ng-bind دستورات، محتوای علامت <p> را به متغیر برنامه پیوند می‌دهند. name。
دستورالعمل‌های AngularJS
همانطور که مشاهده می‌کنید، دستورات AngularJS دارای ng پیشوند ویژگی‌های HTML.
ng-init دستورات به تنظیم متغیرهای برنامه AngularJS ابتدایی کمک می‌کنند.
مثال‌های 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
