AngularJS(آنگولار جی اس) یک فریم ورک از جنس جاوا اسکریپت است که میتواند با استفاده از تگ script به یک صفحه HTML افزوده شود. در این فصل به معرفی مختصری از قسمت ها مختلف آنگولار خواهیم پرداخت.


آنگولار (AngularJS) صفات موجود در HTML را با استفاده از دستورات (Directive ها) بسط میدهد و داده ها را با استفاده از عبارات (Expression) به HTML منتقل میکند.

آنگولار (AngularJS) یک فریمورک از جنس جاوا اسکریپت است.

آنگولار (AngularJS) کتابخانه ای است که با استفاده از زبان جاوا اسکریپت نوشته شده است.

آنگولار (AngularJS) به شکل فایل هایی از جنس جاوااسکریپت توزیع میشود و میتواند با استفاده از تک script به صفحه HTML مورد نظر ما افزوده شود :

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

آنگولار زبان نشانه گذاری HTML را بسط میدهد

آنگولار (AngularJS) زبان HTML را با استفاده از ng-directive ها بسط میدهد. برای مثال :

دستور ng-app یک اپلیکیشن آنگولار (AngularJS) را تعریف میکند.

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

دستور ng-bind داده های اپلیکسشن را به کنترل های HTML منتقل میکند.

به نمونه مثال زیر دقت کنید. در این مثال تگ input و تگ p از طریق دستورات ng به هم مرتبط شده اند :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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 به آنگولار میگوید که عنصر <div> میخواهد از AngularJS استفاده کند.

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

دستور ng-bind مقدار innerHTML از عنصر <p> را با مقدار متغیر name مقدار دهی میکند.


دستورات در AngularJS

همانطوری که قبلا دیدید، دستورات (directives) آنگولار صفت هایی از HTML هستند که با پیشوند ng مزین شده اند.

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

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

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

</div>

در نمونه مثال بالا در دستور ng-init متغیری به نام firstName تعریف و مقداردهی شده است و سپس در پاراگراف پایین تر استفاده شده است.

میتوان دستورات ng را برای معتبر بودن در زبان HTML به صورت زیر نوشت :

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

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

</div>

نکته : شما میتوانید از -data-ng به جای -ng استفاده کنید. در این صورت صفحه ی شما از نظر HTML یک صفحه ی صحیح (valid) است.


در فصول آینده به طور مفصل به directive ها خواهیم پرداخت.


عبارات AngularJS

عبارات(expressions) آنگولار داخل یک جفت بریس نوشته میشوند :  {{ expression }}.

آنگولار (AngularJS) خروجی داده ها را درست در جایی که عبارات قرار میگیرند، نمایش میدهد :

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

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

</body>
</html>

عبارات در آنگولار (AngularJS) همچون دستورات ng-bind ، داده ها را به عناصر HTML منتقل میکنند :

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

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

</body>
</html>

در فصول آینده به طور کامل با عبارات (expressions) آشنا خواهیم شد.


اپلیکیشن های AngularJS

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

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

دستور  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>


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

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

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

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

در فصول آینده به طور کامل با ماژول ها و کنترلر ها آشنا خواهیم شد.