سیب فارسی

شب و روزنوشته های من | داستان سیبی که هر روز به زمین می خورد!

آموزش 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 – قسمت اول

آموزش Angular.js – قسمت اول

27 اکتبر 15

قصد دارم در سیب فارسی چند پست مقدمه ای بر فریم ورک جاوا اسکریپتی و محبوب angular.js را به زبان فارسی نوشته و ارسال کنم. همانطور که گفتم آنچه نوشته خواهد شد تنها مقدمه ای بر angular.js خواهد بود و تصمیم فعلی من اینه که بین 3 تا 5 پست مطالبم و ارائه کنم با توجه به این موضوع قطعا مطالب بیشتر موضاعات essentials این framework javascript خواهد بود.

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

قطعا پست ها هم کوتاه خواهد بود. این مطلب را هم اضافه کنم ممکنه در آینده آموزش های دیگری هم ارائه کنم و تمام مطالب این آموزش تحت عنوان آموزش Angular.js دسته بندی خواهد شد. و احتمال اینکه پست ها بروزرسانی شود هم بسیار زیاد است. بریم سراغ قسمت اول؛

آموزش Angular.js – قسمت اول

angular یک فریم ورک جاوا اسکریپت متن یاز جاوا اسکریپتی است. که توسط گوگل توسعه و نگهداری شده است. این فریم ورک در دسته چارچوب های SPA-single page applications یا چارچوب های مناسب برای توسعه اپلیکیشن های تک صفحه ای می باشد. این فریم ورک جاوا اسکریپتی بسیار مناسب برای چارچوب های تست و توسعه منطبق بر  (model–view–controller (MVC و (model–view–viewmodel (MVVM می باشد.

ویژگی های AngularJS در این بخش feature های مختلف AngularJS را معرفی خواهم کرد. یکی از مواردی که هم مثال هایی در آموزش می نویسید و هم نمونه کارهای دیگر خاصه با این زبان آغاز می کنید مهم هست که مد نظر قرار دهید from scratch یا به عبارت دیگر از ابتدا و صفر شروع نکید و از نمونه کد های موجود استفاده کنید.

مورادی که در این بخش معرفی خواهم کرد  شامل Directives, Filters و Data Binding می شود ضمن اینکه Views, Controllers و Scope را نیز مورد بررسی قرار خواهیم داد.

ابتدا بگم که وقتی می گیم AngularJS زبانی برای SPA ها است یعنی چه. به عبارت دیگر اصلا SPA چیست. منظور از SPA این است که تمام سایت یا هر پروژه وب ما بروی یک صفحه قرار م یگیرد و ما چند صفحه نخواهیم داشت و محتوای View های مختلف روی یک همان یک صفحه ظاهر می شوند.

این موضوع مزایای بسیاری دارد و در pattern های مخلف به سرعت بالاتر در لود و موثر بودن زیر ساخت و موارد دیگر اشاره شده است. نگهداشت DOM و کنترل صفحات مختلف از جمله چلنج های SPA ها می باشد.

از سایت http://angularjs.org می توانید کتابخانه جاوااسکریپتی AngularJS رادانلود کنید. خوب در این قسمت import کردن کتابخانه دانلود شده به اولین برنامه تستی مان را نشان می دهیم:

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>
<body>
</body>

directives: directive در واقع مجموعه ای از میانبرها و روش هاست که به html برنامه کمکمم می کند، به عبارت دیگر موجب سهولت و ساده تر شدن Html کد های برنامه می شود.

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>

<body>

<div class="container">



Name: <input type="text" ng-model="firstName">



You wrote: {{ firstName }}


</div>

</body>

هر جایی که ما ng- دیدیم یعنی در آنجایک directive داریم. ضمن اینکه می توان دایرکتیو custom نیز ایجاد کرد.
در کد بالا ng-model=”firstName” مدل مربوط به کامپوننت را معرفی می کند به عبارتی آی دی این کامپوننت مشخص می شود واین {{ firstName }} عبارت کار data binding را انجام می دهد و هر آنچه در inputtext تایپ شو در پاراگراف تعریف شده نمایش داده می شود.
توجه کنید که ng-app می بایست حتما اضافه شود و scope برنامه شما را مشخص می کند در آینده خواهیم دید که از ng-app می توان روی div ها هم استفاده نمود و حتی چند scope را با چند ng-app مختلف در یک صفحه ایجاد نمود.
پس تا اینجای کار روی کدینگ سه قسمت در angular معرفی شد که شامل
Include the ng-app
Include the ng-model
Bind to that model
می شود.
در این قسمت ضمن معرفی AngularJS کتابخانه آن را نیز معرفی کردیم و با معرفی Directives اولین پروژه خود را بالا اوردیم.

پایان قسمت اول – باقی قسمت ها هم در  سیب فارسی دنبال کنید.