سیب فارسی

شب و روزنوشته های من | داستان سیبی که هر روز به زمین می خورد!
آموزش Angular.js – قسمت دوم
6 نوامبر 15

همونطور که گفته بودم در سیب فارسی سعی می شه مسائل اصلی این کتابخانه محبوب جاوا اسکریپتی یعنی AngularJS را طی چند جلسه ارائه کنم.

خوب با جلسه دوم از آموزش AngularJS در خدمتتون هستم.

در قسمت قبل آخرین مبجثی که گفته شد بحث directives بود و گفتیم که directive ها به کمک برنامه سمت کلاینت می آیند و موجب ساده سازی و کوتاه شدن کد ها می شوند و گفتیم که این امر در AngularJS چه مزایا و گستردگی و قابلیت هایی دارد.

امروز در اولین بخش یک مثال دیگر از directive ها رو اوردم که در آن اطلاعاتی به صورت dummy را می خوانیم و در صفحه وب خود نمایش می دهیم:

 <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div> 

همانطور که در کد بالا ملاحظه می نمایید، در اطلاعات در دایرکتیو ng-init  و متغییر names قرار داده شده است و init نقش constractor را ایفا می کند، ضمن اینکه در دایرکتیو ng-repeat مانند for each جاوا اسکریپت این دیتا دامی رکورد به رکورد خوانده می شود و همانطور که در جلسه قبل گفته شده بود این اطلاعات در صفحه مطابق کد چاپ می شود.

حال به سراغ مبحث فیلتر ها در AngularJS میرویم. فیلتر ها در AngularJS  بسیار استفاده ساده و گستردگی بالایی دارند.

کد زیر مثالی از این استفاده فیلتر ها در AngularJS  می باشد:

<div ng-app="morkaApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country | lowercase }}
</li>
</ul>

</div> 

فیلتر orderby: این فیلتر order رکورد های درون متغییر پر شده با دیتا های پیش فرض را تنظیم می کند که به عنوان مثال در اینجا name می باشد.

filter: این فیلتر کار فیلتر یا در انتزاع بالا تر جستجو ی میان رکوردها را انجام می دهد.

ضمن اینکه uppercase در اینجا مانند جاوا اسکریپت کار بزرگ کردن حروف را انجام می دهد، همچنان که lowercase کار کوچک کردن حروف را انجام می دهد.

در ادامه وارد بخش Views، Controllers و Scope ها می شویم. دوستان همونطور که در ابتدای قسمت اول اشاره کرده بودم AngularJS یک زبان بر مبنای الگوی MVVM میباشد که برای آشنایی بیستر می توانید نگاهی به این لینک بیاندازید.

در MVVM یک بخش اساسی با عنوان ViewModel وجود دارد که وظیفه data binding را با تعامل با View بر عهده دارد.

Scope ها در AngularJs معادل ViewModel می باشد.

به عبارت دیگر همچون Viewmodel در MVVM رابطه بین View و کنترلر به عهده scope می باشد.

اساسا یکی از وظایف الگوهای طراحی همچون MVVM، MVP و معروف تر از همه MVC جدا سازی لاجیک برنامه از View می باشد.

جمله معروفی وجود دارد که می گوید view چیزی از Controller نمی داند و Controller هم صراحتا نمی خواهد چیزی از view بداند!

خوب یک مثال ساده از چگونگی کنترلر ها رادر زیر آورده ام در این مثال یک فانکشن که کار ایجاد دیتای ماهوی یک دیتاویور می باشد را انجام می دهد.

 angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

در کد بالا $scope d یکdependency injection می باشد که در angularjs به اینگونه تعریف می شود.

استفاده از کنترولر در حالی که با view همکاری می کند در کد زیر آورده شده است.

 <div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script> 

همانطور که ملاحظه می نمایید برای نمایش دیتا از دایرکتیوهای معرفی شده در جلسه قبل استفاده نموده ایم و همچنین دیتا بایندینگ هم با همان روش گفته شده در قبل انجام شده است.

امیدوارم مطالب ارائه شده در سیب فارسی مورد استفاده قرار گیرد در جلسه بعد بیشتر راجع به Controllerها و Scope ها صحبت خواهیم کرد.

لینک جلسه اول: آموزش Angular.js – قسمت اول

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *