معرفی (Intro)
در این صفحه «معرفی AngularJS» را شروع می کنیم. «چارچوب جاوااسکریپت (JavaScript Framework)» یعنی یک جعبه ابزار برای ساخت وب سایت. AngularJS را با یک تگ اسکریپت اضافه می کنیم. سپس HTML توانمند می شود و داده ها «بایند (Bind)» می شوند؛ یعنی ورودی کاربر، خروجی صفحه را تغییر می دهد.
AngularJS چیست؟
AngularJS یک چارچوب جاوااسکریپت است. فایل جاوااسکریپت دارد و با تگ <script> اضافه می شود. سپس ویژگی های تازه ای به HTML می دهد.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
گسترش HTML با دستورها (Directives)
«دستور (Directive)» یک ویژگی با پیشوند ng است. «ng-app» برنامه را مشخص می کند. «ng-model» ورودی را به داده وصل می کند. «ng-bind» داده را در صفحه نشان می دهد.
<!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>
</body>
</html>
نمونه با ng-init
«ng-init» مقدار اولیه می گذارد. مثل آماده سازی کیف مدرسه قبل از رفتن.
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
نسخه معتبر HTML با data-ng-
می توان از «data-ng-» استفاده کرد. این کار HTML را معتبر نگه می دارد.
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
عبارت ها (Expressions) در AngularJS
«عبارت (Expression)» داخل {{ }} نوشته می شود. خروجی همان جا نشان داده می شود. مثل ماشین حساب کوچک در متن.
<!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>
بایند دوطرفه با ng-model
با «ng-model» ورودی به داده وصل می شود. تایپ کن و فوری نتیجه ببین.
<!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>{{ name }}</p>
</div>
</body>
</html>
برنامه ها، ماژول ها و کنترلرها
«ماژول (Module)» ظرف برنامه است. «کنترلر (Controller)» منطق صفحه را مدیریت می کند. «ng-app» برنامه را مشخص می کند. «ng-controller» کنترلر را متصل می کند.
<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>
تعریف ماژول
اینجا یک ماژول خالی می سازیم. بعداً ویژگی ها را اضافه می کنیم.
var app = angular.module('myApp', []);
تعریف کنترلر
کنترلر داده ها را آماده می کند. سپس نمایش آن ها ساده می شود.
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
گام های عملی
- یک فایل HTML بساز. نام را index بگذار.
- اسکریپت AngularJS را اضافه کن. اینترنت باید فعال باشد.
- نمونه مناسب را کپی کن. سپس ذخیره کن.
- فایل را باز کن. مقدارها را تغییر بده.
نکته: اگر ورودی کار نمی کند، نام ویژگی ها را دقیق بررسی کن. اغلب اشتباه تایپی است.
جمع بندی سریع
- AngularJS یک چارچوب جاوااسکریپت است.
- دستورها به HTML توان می دهند.
- عبارت ها خروجی را همان جا نشان می دهند.
- ماژول و کنترلر هسته برنامه اند.
ادامه مسیر: خانه AngularJS · عبارت های AngularJS · همچنین معرفی AngularJS را همیشه دم دست داشته باش.