آموزش انگولار-مقدمه

چاپ

انگولار یک فریم ورک جاوااسکریپت است. این فریم ورک می تواند به وسیله ی یک تگ <script> به یک صفحه ی html اضافه شود. 

انگولار خصوصیت های HTML را به وسیله ی دستورات(directives) توسعه می دهد و به وسیله ی عبارات(Expressions)، داده ها را به HTML تحویل می دهد. 

انگولار یک فریم ورک جاوا اسکریپت است

انگولار یک فریم ورک جاوااسکریپت است. درواقع انگولار یک کتابخانه است که به وسیله ی جاوااسکریپت نوشته شده است. 

انگولار در یک فایل جاوا اسکریپت ارائه شده است و می تواند با استفاده از یک تگ script به یک صفحه ی وب اضافه شود:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

انگولار HTML را توسعه می دهد

انگولار HTML را با استفاده از دستورات -ng توسعه می دهد. 

دستور ng-app یک اپلیکیشن انگولار را مشخص می کند. 

دستور ng-model ، مقدار کنترل های HTML از قبیل(input و select و textarea)  را به داده های اپلیکیشن منتقل می کند. 

دستور ng-bind داده های اپلیکیشن را به اشیاء بصری HTML پیوند می دهد. به عبارت دیگر باعث می شود داده ها به نمایش درآیند. 

مثالی از انگولار

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>  مورد نظر، دارنده ی اپلیکیشن(application) انگولار است. 

دستور ng-model مقدار فیلد input را به متغیر اپلیکیشن name نسبت می دهد. 

دستور ng-bind مقدار innerHTML عنصر <p> را به متغیر اپلیکیشن name انتساب می دهد.(به عبارتی مقدار درون پاراگراف را برابر با متغیر name قرار می دهد).

دستورات انگولار

همان طور که قبلا مشاهده نمودید، دستورات انگولار درواقع همان خصوصیات HTML هستند به همراه پسوند ng .

دستور ng-init متغیر های اپلیکیشن انگولار را مقدار دهی اولیه می کند. 

مثال های انگولار

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
خودتان امتحان کنید »

روشی دیگر به همراه HTML معتبر:

مثالی از انگولار

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
خودتان امتحان کنید »
Note

در صورتی که می خواهید صفحه ی HTML خود را معتبر سازید، می توانید به جای -ng از -data-ng استفاده نمایید.

در ادامه ی این آموزش ها، مطالب بیشتری را در مورد دستورات انگولار فرا خواهید گرفت. 

عبارات انگولار

یک عبارت انگولار، درون یک دابل آکولاد(جفت آکولاد) قرار می گیرد مانند: {{عبارت انگولار}}

هنگامی که عبارت مورد نظر نوشته شود، انگولار دقیقا داده ها را در خروجی نشان خواهد داد: 

مثالی از انگولار

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

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

</body>
</html>
خودتان امتحان کنید »

عبارات انگولار مانند دستور ng-bind داده های انگولار را به HTML پیوند می دهند.(به عبارت دیگر، داده ها را به عناصر HTML اضافه می کنند).

مثالی از انگولار

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

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
خودتان امتحان کنید »

در این آموزش ها، شما بعدا مطالب بیشتری را درباره ی عبارات انگولار فرا خواهید گرفت. 

اپلیکیشن های انگولار

ماژول های(modules) انگولار، درواقع اپلیکیشن های انگولار را تعریف می کنند. 

کنترلرهای(controllers) انگولار، اپلیکیشن های انگولار را کنترل می کنند. 

دستور ng-app اپلیکیشن مورد نظر را تعریف می کند و دستور ng-controller  در واقع کنترلر را مشخص می کند.

AngularJS Example

<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>
خودتان امتحان کنید »

ماژول های(modules) انگولار در واقع اپلیکیشن ها را تعریف می کنند:

ماژول انگولار

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

کنترلرهای(controllers) انگولار، اپلیکیشن ها را کنترل می کنند:

کنترلر انگولار

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

در ادامه ی این آموزش ها، بیشتر با ماژول ها و کنترلرها آشنا خواهید شد. 

نوشته شده توسط احسان عباسی
بازدید: 16349