فیلتر ها در AngularJs

در AngularJs فیلتر ها برای فرمت کردن داده های قابل نمایش در view ها استفاده می شوند. به طور مثال وقتی بخواهیم عنوانی انگلیسی را بوسیله حروف بزرگ نمایش دهیم و یا مثال هایی از این دست.

برای استفاده و فراخوانی یک فیلتر روی یک مقدار خاص از کاراکتر | (pipe) در درون کاراکتر های data binding ({{}}) استفاده می شود.

مثال زنده آن به صورت زیر است:

Basic AngularJs Filters | Farid Bekran

در تکه کد بالا lowercase نام یکی از چندین فیلتر موجود در خود AngularJs است. تعداد قابل توجهی فیلتر به همراه این کتابخانه در اختیار برنامه نویس قرار می گیرد. با توجه به این که آموزش نحوه استفاده از تمامی این فیلتر ها از عهده این مطلب خارج است، به صورت اجمالی لیست این فیلتر ها ذکر می شود.

یکی از امکانات جالب و حیاتی برای برنامه نویسان پروژه های بزرگ ایجاد فیلتر هایی اختصاصی شده با نیازهای خاص است.

برای ساختن فیلتر، یک راه خوب (best practice) این است که آن را در module مربوط به خودش ایجاد کنیم تا بتوانیم در module ها مختلف از آن استفاده کنیم.

module مربوط به تعریف فیلتر

 module اصلی برنامه

 و به صورت زنده:

JS Bin

در تکه کد بالا ما ابتدا یک module برای فیلتر مورد نظرمان ایجاد کردیم و در آن module فیلتر را تعریف کردیم. سپس یک module اصلی ساختیم که module فیلتر را نیاز داشت (مطلب مربوط به module را مطالعه نمایید) .

خروجی دستور ساخت فیلتر یک function است که در واقع روی مقادیر ما اجرا خواهد شد. روش استفاده از این function توسط AngularJs بسیار ساده است: به ترتیبی که شما ذکر کرده اید به صورت زنجیر وار تمام فیلتر ها را روی مقدار مربوطه اجرا می کند. به طوری که خروجی فیلتر اول به عنوان ورودی فیلتر دوم پاس می شود و الی آخر.

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

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

ایجاد فیلتر های اختصاصی در موقعیت های متفاوتی مورد استفاده قرار می گیرند. به طور مثال اعتبار سنجی اختصاصی در فرم های HTML که به طور مفصل در آینده بحث خواهند شد.

Expression Scope Controller در AngularJs

مطالب قبلی در این زمینه را می توانید از این جا مطالعه نمایید.

به تصویر زیر توجه کنید:

scope_Expression_controller

Scope:

Scope و یادگیری نحوه کار آن و چگونگی استفاده از آن یکی از اولین مهارت هایی است که یک برنامه نویس Angular به آن نیاز دارد.

Scope در واقع یک context برای اجرای تمام دستورات expression های AngularJs است.

همان طور که از مطالب گذشته هم خاطرتان هست scope در واقع یک شی ساده  است. پس قابلیت تعریف المان های مختلفی را روی آن داریم. که به صورت خلاصه به دسته های زیر تقسیم بندی می شوند.

  • تمام property های مورد استفاده در view
  • تمام function ها مورد استفاده در view
  • تمام رویه های business ای مورد نیاز برنامه client ای ما

از یک زاویه دید دیگر، scope چسبی بین view و controller است. به صورتی که درست قبل از render شدن کامل view، AngularJs به اصطلاح scope مورد نظر ما را به view لینک می کند. که موتور مربوط به render کردن view ها با استفاده از data موجود در scope و expression ها و directive های استفاده شده در view، نسخه نهایی HTML مربوط به view ما را تولید کند. همچنین این موتور یک سری watch به هر property ای که ما در view استفاده کردیم می چسباند که بتواند تغییرات اتفاق افتاده در  view را به اطلاع controller مربوط به آن برساند.

نکته: همان طور که مطرح شد، scope با استفاده از دستور  watch$   قادر به عکس العمل در برابر تغییرات property های استفاده شده در view خواهد بود.

rootScope$: این شی به نوعی پدر تمام scope های ایجاد شده در یک برنامه AngularJs ای است. به طوری که همه controller ها موجود در یک برنامه (ng-app) قادر به دسترسی به آن هستند. به همین صورت هر property و function ای که در rooteScope$ تعریف شده باشد در تمام view های آن برنامه قابل دسترسی است.

Scopes in AngularJs – Farid Bekran

در مثال بالا از دستور run که در module تعریف شده است استفاده کردیم تا بخش مربوط به نوشتن مقدار در name را انجام دهیم. همچنین از مفهومی به اسم inject کردن استفاده کردیم تا reference ای به rootScope$ را به درون function نوشته شده مان پاس بدهیم. AngularJs به طور اتوماتیک reference شی مورد نظر ما را به function پاس خواهد داد. نکته: به طور کلی روش درستی نیست که در rootScope$ المان های زیادی مانند property ها و function ها ایجاد کنیم. در واقع فرض کنید که این شی همان global scope خود JavaScrip است. رفتار شما با این شی همان گونه باشد بهتر است. Controller: استفاده اصلی controller در AngularJs افزودن property و function به scope خودش است.

نکته: بهتر است نام controller به صورت Controller* باشد. به طور مثال userController

ایجاد یک controller ساده.

وقتی با استفاده از ng-controller یک controller موجود را به یک DOM Element می چسبانیم، AngularJs در زمان اجرا یک scope$ مخصوص به آن controller می سازد و به function ما پاس می دهد. و از آن به بعد می توانیم از شی  scope استفاده کنیم. در واقع این همان scope ای است که ما در درون controller و view به آن دسترسی داریم. سطوح درختی controller ها: همه scope ها در یک برنامه AngularJs یک scope پدر دارند. این حالت درختی در scope ها با استفاده از امکان controller ها تو در تو ایجاد می شود. استثنا: scope هایی که در درون directive ها ایجاد می شوند اصطلاحا isolated scope هستند و هیچ پدری ندارند. بودن در نظر گرفتن استثنا بالا، همه scope ها در AngularJs با استفاده از prototypal inheritance ایجاد می شوند. این همان امکانی است که scope ها را قادر می سازد به خصوصیات پدر خود دسترسی داشته باشند. نحوه کار این نوع ارث بری به طور خلاصه این گونه است: اگر یک property مورد درخواست در expression در scope خودش وجود نداشت، AngularJs یک سطح بالاتر رفته و مقدار آن property را از پدر آن جویا می شود، این عمل را تا یافتن مقدار property مورد نظر ادامه می دهد تا حدی که دیگر پدری وجود نداشته (در همان rootScope)  اگر هیچ مقداری برای property مورد درخواست پیدا نکرد آن property را رها کرده و هیچ خطایی هم صادر نمی کند. Controller Hierarchy In AngularJs – Farid Bekran

نکته: همیشه دقت کنید که هیچ گونه دستکاری در DOM را در controller خود انجام ندهید.

Expression:

Expression ها را در مثال های مختلفی که تا کنون دیده اید استفاده کرده ایم. Expression های در AngularJs در درون {{/*expression*/}} دیده می شوند.

در مورد expression ها به نکات زیر توجه کنید:

  • همه expression ها به اصطلاح در context یک scope اجرا می شوند و به تمام متغیر های آن scope دسترسی دارند.
  • expression ها هیچ وقت خطاهایی از قبیل Type Error و Reference Error نمی دهند.
  • هیچ گونه دستور کنترلی در expression ها قابل استفاده نیست.

Module در AngularJS

به طور کلی برنامه نویسی Modular در javascript یکی از pattern های خوب برنامه نویسی است. مطالعه این pattern بدون در نظر گرفتن استفاده آن در AngularJs بسیار مفید است. برای مطالعه بیشتر این pattern به اینجا مراجعه کنید.

در برنامه مثالی که در سلام AngularJs مطرح کردم همان طور که دیدید function ای که به عنوان controller استفاده کرده بودیم در هیچ Module ای قرار نداشت و اصطلاحا در global scope بود. global scope بودن به طور ساده و خلاصه یعنی این که این function یا متغیر یا هر چیزی که باشد از تمام نقاط برنامه قابل دسترسی است.

مثال سلام AngularJs

JS Binاین نحوه کد نویسی در javascript یک روش بد برنامه نویسی یا anti pattern  است. راه حلی که AngularJs برای برنامه نویسی بهتر و مدیریت بهتر controller ها و دیگر فاکتورها دارد module است. نحوه تعریف یک module به صورت زیر است  

این متد اصطلاحا متد setter است و کارش ایجاد کردن یک module در برنامه ما است. برای دسترسی به یک module از متد getter همین api استفاده می شود.

 با دسترسی به شی  یک module امکان ایجاد controller و service و directive و دیگر کامپوننت ها با استفاده از دستورات خاص خودشان، بوجود خواهد آمد. پارامتر ورودی اول دستور setter مربوط به ایجاد یک module نام module مورد نظر ما است. که به صورت camel case نیز خواهد بود. پارامتر دوم ورودی دستور setter مربوط به ایجاد یک module لیستی از module ها مورد نیاز این module است که injector موجود در AngularJs قبل از load شدن module ما آن module ها را load کرده و آماده استفاده می کند. با استفاده از امکان module مربوط به AngularJs، تکه کرد برنامه ما به صورت زیر تغییر می کند. Module In AngularJs

نتیجه کد جدید با کد قبلی تفاوتی ندارد ولی استفاده از امکان module تغییراتی به کد مثال جدید ما داده است.

اول: در ng-app باید نام module ای که میخواهیم load  و استفاده شود را ذکر کنیم.

دوم: از دستور controller که روی شی  module تعریف شده است برای ایجاد controller استفاده کرده ام. که پارامتر اول آن نام controller و پارامتر دوم آن function بی نام مربوط به controller است.

data binding در AngularJs

اول رفع مسئولیت را بخوانید!

Binding در AngularJs یکی از اولین نکات مورد توجه هر برنامه نویسی است. در واقع نوع binding ای که در این کتابخانه وجود دارد کمی با نوعی که شاید خیلی از ما آشنایی داشته باشیم متفاوت است. AngularJs بر خلاف بیشتر کتابخانه های client side به صورت پیش فرض two way data binding را پشتیبانی می کند.

AngularJs روش متفاوتی از اکثر کتابخانه های فعلی MVC موجود در بازار را برای ایجاد view در نظر گرفته است.

در اکثر کتابخانه های فعلی اتفاقی مانند ASP.NET MVC (فقط سمت client) برای view ها می افتد. با این روش که شما یک سری اطلاعات تحت نام  model به الگویی به نام view می دهید و یک موتور با استفاده از این اطلاعات و زبان خاص view در نهایت HTML به شما تحویل می دهد. در این حالت binding ای اتفاق نیفتاده است و اصطلاحا view مرده ای خروجی این کار بوده است. (تصویر پایین)

 

view-model-html
روش بیشتر کتابخانه ها برای تولید view

AngularJs روش متفاوتی در پیش گرفته است که اصطلاحا به آن two way data binding گفته می شود. علاوه بر این که به صورت داخلی engine ای برای ترکیب view و model برای تولید HTML دارد. امکان ارتباط دو طرفه نیز برای model که اینجا همان scope$ است و view ارائه می دهد. (با استفاده از syntax مربوط به خود) این view را اصطلاحا view زنده بنامیم!

همان طور که در مطلب سلام AngularJs گفتم این امکان را می توان خیلی ساده تعریف کرد.

پس از تولید نهایی HTML مربوط به view مورد نظر ما، اگر هر property از scope$ از طریق controller تغییر کند، تغییرات به صورت اتوماتیک به view اعمال می شوند. و بلعکس اگر در view تغییری در property ای از scope$ اتفاق افتد controller می تواند بر اساس تغییرات کار خاصی انجام دهد. (با استفاده از همان watch$)

روشی که angularJs برای ارتباط view و model دارد
روشی که angularJs برای ارتباط view و model دارد

با در نظر گرفتن مثال سلام AngularJs

JS Bin

ng-model: در این مثال دستوری که به view می گفت اطلاعات چه property ای از scope$ را در درون input قرار بدهد و هنگام تغییر در مقدار input تغییرات را در چه property ای اعمال کند ng-model بود. (scope.name$)

{{name}}: این دستور امکان استفاده از one way data binding در AngularJs است. این دستور به view می گوید مقدار name از scope$ را در مکان مورد نظر اعمال کند و این کار نیز هر زمان که name تغییر کرد تکرار خواهد شد.

watch$: این دستور همان بخشی را ایجاد می کند که گفتم model را قادر به observe کردن تغییرات اتفاق افتاده در view می کند. ورودی دستور watch$ می تواند نام property مورد نظر ما برای بررسی تغییر، باشد. در همان مثال ما به ازای هر تغییر در name عبارت “changed” را به انتهای property مورد نظرمان اضافه می کنیم.

مهم : روش متداول خوب برای data binding

با توجه به این که در AngularJs از prototypical inheritance برای پیاده سازی controller ها و scope$ های تو در تو استفاده می شود. (در مورد این موضوع بیشتر بحث خواهیم کرد) نیاز است که همیشه در نظر داشته باشید که به طور مستقیم در scope$ یک property ایجاد نکنید.

به طور مثال به جای ایجاد یک property به صورت زیر

یک شی جاواسکریپتی ایجاد کرده و property مورد نظر خود را در آن ایجاد کنید

بدیهی است وقتی می خواهیم مقدار این property را به جایی bind کنیم باید از {{person.name}} استفاده کنیم.

 

یک مقدار مهندسی – به بهانه AngularJs 2.0

چند روز پیش شنیدم که تیم AngularJs تصمیم به رها کردن نسبی پروژه AngularJs 1.x گرفته و نسخه بعدی این کتابخانه AngularJs 2.0 خواهد بود. (این موضوع مربوط به ماهها قبل می شود ولی من دیر شنیدم) موضوع اصلی این نوشته تغییرات احتمالی این کتابخانه نیست. از آن جایی که با بررسی هایی که کردم به این نتیجه رسیدم که نسخه دوم این کتابخانه بسیار بسیار در کاربری و مفاهیم و پیاده سازی با نسخه اول آن فرق دارد. چند نکته به نظرم رسید.

در اولین نگاه به موضوع برای من قابل درک نبود و نیست که کتابخانه ای به طور کلی از رده خارج شود و تیم اصلی تولید کننده آن پشتیبانی زیادی به آن ندهند. آن هم با در نظر گرفتن مدت کمی که از ایجاد و فراگیر شدن این کتابخانه گذشته است. من از فضای خارج از ایران اطلاعی ندارم ولی در ایران بسیار برنامه نویسان و مدیران پروژه ای دیده ام که بسیار مشتاق استفاده کردن از این کتابخانه بود و هستند.

بدون در نظر گرفتن این که واقعا در سال آینده میلادی با ارائه نسخه دوم این کتابخانه چه پیش خواهد آمد، این که این کتابخانه گزینه ی مناسبی برای استفاده در پروژه های آتی هست یا نه جای سوال دارد. اگر از نسخه ی اول استفاده شود با توجه به مدت زمان کمی که به ارائه نسخه دوم مانده ممکن است به ذهن بیاید که چرا صبر نکنیم تا نسخه دوم ارائه شود و از آن استفاده کنیم. اشکال این نوع طرز فکر این است که دوره زمانی مورد نیاز برای یادگیری نسخه جدید را در نظر نمی گیرد. اگر تصمیم استفاده از نسخه جدید باشد ممکن است شروع پیاده سازی تا یک سال و نیم دیگر هم اتفاق نیوفتد.

همیشه در تصمیمات برنامه نویسی ام (یا شاید هر تصمیمی!) یک مثلث را در نظر می گیرم، که سه ظلع با عنوان های هزینه، زمان، کیفیت  دارد. در تصمیمات مدیریتی مهندسی همیشه باید توازنی بین این سه ظلع ایجاد شود. اگر این سه فاکتور اصلی را به صورت نا متوازن پیاده کنیم به احتمال خیلی بیشتری پروژه ما با شکست مواجه خواهد شد. در استفاده از AngularJs هم همین نکته را باید در نظر داشته باشیم.

cost-time-quality

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

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

اگر سازمان شما مشکلی با این مسئله نداشته باشد که تیم های تولید به مدت ۶ ماه دست از پیاده سازی امکان جدید و پشتیبانی بکشند و وقت خود را صرف تغییر و بروزرسانی کدهایشان کنند، خیلی خوب است. و مشکلی وجود نخواهد داشت. ولی به احتمال زیاد هیچ مدیری یا حدااقل هیچ مشتری ای این موضوع را درک نخواهد کرد.

از آن جایی که این پروژه متن باز است یکی از گزینه های به صرفه برای کوتاه مدت fork کردن این پروژه و ایجاد نسخه های داخلی برای این پروژه خواهد بود. ولی این گزینه هم در طولانی مدت هزینه های بسیاری به همراه خواهد داشت. فرض کنید شما می خواهید زیرمجموعه ای از تیم تولید AngularJs در سازمان خود داشته باشید!!!

ولی کسانی که در حال یادگیری AngularJs هستند چه کنند؟!

به نظر من به کار خود ادامه دهید. یاد گرفتن کتابخانه ای مانند AngularJs چه این پروژه پابرجا باشد چه نباشد تجربه بسیار خوبی است. از بیشتر مفاهیمی که در این کتابخانه آموخته اید در پروژه ها و کتابخانه های دیگر نیز می توان استفاده کرد. به طور کلی خیلی نگران این نباشید که آیا این کتابخانه خواهد ماند یا نه.

تغییر همیشه در دنیای نرم افزار بوده و خواهد بود. مهم مدیریت درست تغییرات است.

سلام AngularJs

در پیش مقدمه ای به AngularJs، در مورد بعضی از امکانات مورد علاقه ام در این کتابخانه اشاره کردم. ولی به طور کلی بد نیست که تعریفی رسمی (یا شاید غیر رسمی!) از این کتابخانه در ذهن داشته باشیم. تیم تولید کننده این کتابخانه، AngularJs را بیشتر با مضمون زیر معرفی می کنند.

AngularJs کتابخانه ای است که با تکنولوژی های پر استفاده وب مانند JavaScript، Css، HTML  ساخته شده تا برنامه نویسی وب را آسانتر از همیشه کند.

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

برای شروع برنامه نویسی با AngularJs باید کتابخانه را در صفحات خود link بدهید. راههای مختلفی برای دریافت angularJs موجود است که به طور خلاصه به صورت زیر هستند.

  • از طریق nuget: Install-Package angularjs
  • از طریق bower: bower install angular
  • دانلود کد: https://angularjs.org/

پس از این که سورس AngularJs را در صفحات خود link کردید به راحتی و بدون هیچ تنظیمات خاصی می توانید از این کتابخانه استفاده کنید.

برنامه زیر را در نظر بگیرید. این برنامه چند امکان ابتدایی در AngularJs را استفاده می کند.

JS Bin

ng-app: از این directive (بعدا بیشتر در مورد directive ها صحبت خواهم کرد ولی الان فرض کنید چیزی مانند attribute های HTML هستند)  برای مشخص کردن بخش هایی از صفحه به عنوان برنامه AngularJs استفاده می کنیم. خیلی وقت ها و بیشتر در برنامه های single page این تگ در body قرار می گیریند (مانند مثال من)  ولی این directive میتواند در هر تگی که شامل محتویات برنامه ما است قرار گیرید. برای تمرین این directive را بردارید و در div زیری تگ body قرار دهید. می بینید که برنامه درست کار می کند.

فرض کنید وقتی AngularJs در صفحه بالا می آید دنبال تگ های ng-app می گردد. با استفاده از این تگ ها میتواند تشخیص دهد که باید فرایند به اصطلاح bootstrapping را روی چه تگ هایی و با چه اطلاعاتی انجام دهد. یکی از استفاده های قشنگ این امکان وقتی است که شما برنامه ای دارید که قبلا به طور کامل با کتابخانه های دیگری نوشته اید و حتی single page هم نیست. ولی در بخشی از صفحات خاص می توانید با استفاده از این directive برنامه های AngularJs ای خود را بالا بیاورید.

ng-controller و myController: در AngularJs کامپوننتی به نام controller وجود دارد که می توان آن را به عنوان initializer و اضافه کننده بخشی از رویه ها به view در نظر گرفت. در مثال بالا اگر دقت کرده باشید ما از چند متغیر name و changed استفاده کردیم. view مورد نظر ما )همانHTML  مان)  انتظار خواهد داشت که در زمان اجرا در scope$ خودش این متغیر ها وجود داشته باشند. همان طور که در مطلب قبل گفتم scope$ یک شی جاوااسکریپتی ساده است. الان چطور باید مقادیر مربوط به name و changed را درون این متغیرها بگذاریم؟ اینجاست که controller کمکمان می کند. وقتی با استفاده از directive مورد نظر (ng-controller) نام controller خودمان را به آن پاس می دهیم در واقع به AngularJs می گوییم کار initialize کردن scope$ مربوط به view را به آن controller بسپارد (در این مثال myController).

به کد بالا اگر دقت کرده باشید تابع myController ورودی ای به نام scope$ دارد. این ورودی در زمان اجرا دقیقا همان شی ای است که view مورد نظر ما (یا هر view ای که این controller را برای خودش انتخاب کرده است)  مورد استفاده قرار خواهد داد.

scope$: بیشتر این شی را مانند چسبی بیین view و controller اش در نظر می گیرند! تمام ارتباط بین این دو کامپوننت با استفاده از scope$ پیاده سازی می شود. در این بخش یک امکان مهم به عنوان two way databinding وجود دارد. این امکان را اینطور تعریف می کنم که هر وقتی از طریق HTML مقادیر property های scope$ تغییر کرد controller متوجه خواهد شد (خط مربوط به استفاده از watch$ را ببینید) و هرگاه controller تغییری به هر متغیری داد View متوجه خواهد شد. به همین راحتی.

توجه: اگر سوالات زیادی در ذهن شما ایجاد شد نگران نباشید. در مورد هریک از این بخش ها به طور مفصل بحث خواهیم کرد.

توجه: از JsBin هایی که به عنوان مثال استفاده می کنم، شما هم استفاده کنید و بعضی سعی و خطاها را به صورت live انجام دهید.

پیش مقدمه ای کوتاه به angularJs

اول رفع مسئولیت را بخوانید!

استفاده از angularjs و یادگیری نحوه استفاده از آن علاوه بر این که در این برهه زمانی خاص به یک (شاید) مد تبدیل شده باشد، ولی ابتدای امر استفاده کنندگان و تبلیغ کنندگان آن حتما دلایل خوبی برای استفاده و تبلیغ استفاده از این کتابخانه داشته اند.

خود من در برنامه نویسی سمت client خیلی تجربه طولانی ای ندارم. ولی به طور کلی یک سری دلایل (در کنار نیاز به یادگیری) برای یادگیری و استفاده از این کتابخانه یافته ام.

۱ – اولین موردی که حتما به گوش شما هم خورده است سادگی استفاده و نیاز به نوشتن کد کمتر است. وقتی از کتابخانه ای مانند angulrajs اتفاده می کنید. به طور حتم نیاز به انجام یک سری کارهای تکراری و خسته کننده در سمت client نخواهید داشت. امکانات موجود در angular به شما کمک خواهند کرد که کارهای روزمره و تکراری کمتری انجام دهید.

۲ – با استفاده از angularjs امکان بهتر انجام دادن separation of concerns در برنامه سمت client شما وجود خواهد داشت. البته اگر از روش های پیشنهادی خود کتابخانه در برنامه تان استفاده کنید. به طور مثال با استفاده از امکان directive و controller (و به طور کلی امکان MVC موجود در این کتابخانه) در این نوشتن کد های جاواسکریپت ای که به صورت جدا از view های شما باشند، خیلی راحتتر خواهد بود.

۳ – controller: وظیفه اصلی این امکان در angularjs ایجاد ارتباط بین بخش های داخلی پروژه شما و view ها است. این امکان از طریق کامپوننتی به نام $scope به شما داده می شود. $scope یک شی جاواسکریپتی است که قابلیت مقدار دهی از طریق controller را دارد. به طور مثال شما در controller خود property ای به شی $scope اضافه می کنید و از طریقی همین property در view قابل دسترس است.

۴ – directive: وقتی تازه برنامه نویسی وب با asp.net را آغاز کرده بودم همیشه این سوال برای من ایجاد می شد (خیلی سال پیش!!) که چرا در html این امکان را ندارم که مانند usercontrol های asp.net یک تگ درست کنم. به طور مثل علاقه داشتم در تگ های html قادر باشد از کد زیر استفاده کنم.

 بگذریم که امکانات دیگری نیز برای براورده کردن این نیاز در وب وجود دارد (و از بحث این نوشته خارج است) در angularjs شما این امکان را دارید که حتی تگ هایی مخصوص به خود را داشته باشید. و خصوصیات و کاربری های خاص خود را به آن اضافه کنید.

۵ – service:  امکان service و service provider به شما این امکان را می دهد که کد های مربوط به data access یا هر کد دیگری که ذاتا متعلق به لایه service هست را از کدهای موجود در controller خود جدا کنید. service را مانند کلاس و اشیایی تصور کنید که کد های مشترک متعلق به controllerها را در خود دارند و قادر به تزریق هر یک از این ها در هر controllerای هستیم.

۶ – binding: با این که کل این کتابخانه برای نوشتن برنامه های single page تحت وب یکی از کتابخانه های ایده ال است ولی الزاما برای استفاده از این کتابخانه نیازی به نوشتن برنامه single page نیست. binding موجود در angularjs را اینگونه تصور کنید که وقتی شما مقدار property ای در $scope را تغییر می دهید در همان لحظه مقدار استفاده شده در view نیز تغییر می کند. یکی از کارهایی که با jquery میشود انجام داد به این صورت است

JS Binولی با angularjs به این صورت JS Bin

اگر دقت کرده باشید نیازی به نوشتن کد جاواسکریپتی وجود نداشت. با اینکه این مثال یک مثال از کاربرد angularJs در دنیای واقعی نیست. ولی به طوری محسوسی حتی زمانی که مسائل پیچیده تر می شوند، استفاده از angularjs بصرفه تر می شود.

۷ –  یکی از روش های خوب برنامه نویسی و تولید UI استفاده از تکنیک declarative programming است. اگر با WPF آشنایی داشته باشید حتما با این روش برنامه نویسی آشنایی دارید. ولی به طور خلاصه این گونه در نظر بگیرید که ما در مثال بالا با استفاده از jquery نیاز داشتیم که کد صریح جاواسکریپتی مربوط به تغییر مقدار وhandle کردن رویداد را انجام بنویسیم. ولی در مثال angularjs ای فقط مشخص (declare) کردیم که مقدار name از چه تگی پر شود و در چه مکانی نمایش داده شود. البته که پشت همه این کارهای کدهای جاواسکریپتی نوشته شده اند. ولی این موضوع کمک می کند که view ما شامل کد های جاواسکریپتی نشود. به نوعی می توان این مورد را هم زیر مجموعه ای از separation of concerns دانست.

۸ – routing: این امکان بیشتر در برنامه های single page استفاده می شود. در برنامه های single page شما نیاز دارید بر اساس آدرس صفحه controller و view مورد نظر خود را اجرا نمایید. این کامپوننت موجود در angularjs این امکان را به راحتی به شما می دهد. اگر با asp.net MVC یا هر زیرساخت MVC ای آشنایی داشته باشید به راحتی این موضوع قابل درک است.

بدیهی است این مطلب یک پیش مقدمه جهت آمادگی ذهنی برای یادگیری angularjs است. دلایل بالا هر چند خلاصه ممکن است کمکی به درک بهتر دلایل یادگیری این کتابخانه کند.

حتما دلایل یا امکان دیگری در این کتابخانه، نیز به ذهن تک تک ما می رسد. خوشحال می شوم به صورت کامنت در همین پست دلایل شما را هم بشنوم.