تصویر امیر حسین اکبری
زبان برنامه نویسی Angularjs زبان اسکریپتی سمت کاربر می باشد که بوسیله آن ویژگی های Html را میتوانیم گسترش دهیم که در ادامه به بررسی آن می پردازیم.

 

مقدمات انگولار

انگولار زبان اسکریپتی سمت کاربر میباشد. برای استفاده از این زیان باید انگولار را به فایل html خود اضافه کنید تا بتوانید از امکانات آن استفاده نمایید. انگولار خصوصیات html را به وسیله Directive ها گسترش داده و بوسیله expression تحویل html می دهد. برای اضافه کردن انگولار به فایل html می توانید آن را به یکی از روش های زیر اضافه کنید:

از طریق CDN:

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

و یا آن را دانلود کرده و در فایل های پروژه قرار داده و آن را به قایل html خود اضافه کنید.

  • برای یادگیری انگولار ابتدا باید html,java script و css را بدانید.
  • انگولار برای نرم افزارهای تک صفحه ای (Single Page Applications یا SPA) مناسب است.

تاریخچه انگولار

انگولار ورژن ۱ در سال 2009 توسط یکی از کارمندان شرکت google مطرح شد و در سال 2012 توسط گوگل به طور رسمی انتشار یافت که هم اکنون توسط گوگل حمایت می شود.


توسعه بوسیله انگولار

انگولار html را بوسیله دستورات ng-  گسترش میدهد. که در ادامه چندتا از دستورات مهم را بررسی میکنیم:

دستور ng-app که در ابتدای فایل html اضافه می شود و نشان دهنده آن است که فایل html حاوی دستورات (اپلیکیشن) angular می باشد.

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

دستور ng-bind که داده های اپلیکیشن را به فایل html تحویل می دهد. در واقع باعث به نمایش درآمدن اطلاعات می شود.

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

دستور ng-repeat که یک عنصر 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>

توضیح:

  • در div انگولار را به فایل html اضافه می کنیم.
  • در input با استفاده از ng-model مقدار فیلد input را به name نسبت می دهیم.
  • در ng-bind مقدار name را به کاربر نمایش میدهیم

عبارات آنگولار - Angular expressions

با استفاده از عبارات آنگولار داده ها را عینا به کاربران نمایش می دهیم. این عبارات در آکولاد به کاربران نمایش داده می شود. مانند: {{عبارات انگولار}}

مثالی ساده از عبارات انگولار:

<!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>

توضیح:

  • با استفاده از ng-model ورودی input را به name نسبت می دهیم.
  • با استفاده از عبارت {{name}} مقدار نسبت داده شده به name را به کاربران نشان می دهیم.

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

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

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

<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 و lastname را مقدار دهی اولیه میکنیم تا با استفاده از عبارت {{firstname + " " + lastname}} تحویل کاربر دهیم.

توضیح: $scope در انگولار همان شیی ء اپلیکیشن است که حاوی پارامترها و توابع اپلیکیشن می باشد.


مثالی از ng-repeat:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

توضیح:

  • بالا دستور ng-repeat بر روی آرایه ای از اشیاء استفاده شده است.
  • با دستور ng-init آرایه را مقدار دهی اولیه میکنیم.
  • با عبارت {{x}} داده های حاصل از ng-repeat را به کاربر نشان می دهیم.

 

دیدگاه‌ها

تصویر محمدعلی اکبری

محمدعلی اکبری

مهارت ارزشمندیه

افزودن نظر جدید