معرفی انگولار

پس از ظهور فن آوری AJAX شاهد پیدایش Web Application های بسیاری با حال و هوای Windows Application ها بودیم. اما هر چه پیچیدگی صفحات وب و منطق نرم افزاری آنها پیچیده تر میشد پیاده سازی این صفحات با استفاده از AJAX به مراتب زمانبرتر و پیچیده تر از پیاده سازی آنها به صورت سنتی میشد. همین مشکلات باعث تغییر نگرش برنامه نویسان وب به کد سمت کلاینت و ایجاد فریم ورک angular شد که در این سری مقالات به معرفی و بررسی آن خواهیم پرداخت.

مقالات مرتبط

پس از ظهور فن آوری AJAX شاهد پیدایش Web Application های بسیاری بودیم. بسیاری از برنامه نویسان اقدام به تولید وب سایتها و وب اپلیکیشنهای گوناگون با حال و هوای نرم افزارهای تحت ویندوز و یا دیگر سیستم های عامل نمودند. منظورم از حال و هوا refresh نشدن صفحات و یا عدم استفاده از post back ها میباشد که برای کاربران وب تجربه جدیدی بود و دیگر با هر کلیک نیاز نبود زمان زیادی برای لود شدن مجدد محتوا در بروزر صرف کنند.

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

این روش بسیار ساده و کارآمد میباشد اما برای صفحات ساده و یا تنها بخشی از صفحات. هر چه پیچیدگی صفحات وب و منطق نرم افزاری آنها پیچیده تر میشد پیاده سازی این صفحات با استفاده از AJAX به مراتب زمانبرتر و پیچیده تر از پیاده سازی آنها به صورت سنتی میشد. بسیاری از پروژه های Single Page Application یا SPA یا برنامه های تک صفحه ای ( که در آنها عملاً تنها یک صفحه توسط کلاینت لود میشود و محتوای آن یک صفحه به مرور با تعاملات گوناگون کاربر به روز رسانی میشد) به علت پیچیدگی کد سمت کلاینت و قابلیت تغییر پذیری و آپگرید پایین با شکست مواجه شدند. تمامی این دلایل باعث شد که برنامه نویسان به دنبال یک معماری جدید در سمت کلاینت باشند.

فریم ورکهای گوناگونی برای راحت ساختن برنامه نویسان و کاستن از پیچیدگیهای کد سمت کلاینت ایجاد شدند هدف اصلی این فریم ورکها پیاده سازی معماری های آشنا و محبوب سمت سرور مانند MVC در سمت کلاینت بود. از جمله این فریم ورکها میتوان به Angular.js ، Backbone.js و Ember.js اشاره نمود. که هدف از این سری مقالات آشنا نمودن شما دوستان گرامی با Angular.js و نحوه پیاده سازی آن در پروژه های وب به صورت جزئی و یا کلی در پروژه های SPA میباشد.

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

مفاهیم پایه AngolarJs

در این بخش به معرفی از ویژگیهای معماری AngulaJs با استفاده از نمونه کدهای ساده خواهیم پرداخت.

Template های سمت کلاینت

برنامه های مبتنی بر وب یا همان وب اپلیکیشنها کد HTML صفحات مختلف وب را در سرور با استفاده از داده های موجود در پایگاه داده و همچنین View ها رندر میکنند و به کلاینت میفرستند. همانطور که اشاره شد بسیاری از برنامه های مبتنی بر فن آوری AJAX نیز همین کار را انجام میدهند. اما AngolarJs در این زمینه متفاوت عمل میکند به این ترتیب که قالبهای html یا همان template ها به همراه داده های استخراج شده از پایگاه داده و یا دیگر منابع داده ای به کلاینت فرستاده میشوند و در کلاینت داده ها و قالبها با هم ترکیب شده و به کاربر نمایش داده میشوند. در معماری angularJs نقش سرور تنها نگهدارنده و ارسال کننده قالبهای استاتیک و همچنین استخراج و ارسال داده از پایگاه داده میباشد و بس.

برای درک بهتر ادغام قالب با داده در سمت کلاینت توسط angularJs بهتر است یک مثال عملی ساده را با هم بررسی کنیم. برای شروع قالب HTML را ایجاد میکنیم که عملاً یک فایل ساده HTML در سرور میباشد:

همچنین منطق برنامه را در فایل controller.js قرار میدهیم که در بخش Head قالب آنرا معرفی کرده ایم:

با اجرای این برنامه پیغام خسته کننده و همیشگی در ابتدای یادگیری هر فریم ورک و زبان انگلیسی یا همان Hello World خودمان ظاهر خواهد شد. اما چند نکته جالب توجه در رابطه با نمونه کد بالا موجود میباشد که برای هر کسی که کمی برنامه نویسی وب کار کرده باشد ایجاد سوال میکند:

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

Model View Controller یا MVC

خوب از خیر تاریخچه این مدل معماری میگذریم چون میدانم که برای درس تاریخ این مقاله را نمیخوانید. اما یه توضیح خلاصه راجع به معماری لازمه. علت محبوبیت این مدل این هست که کد شما را به سه قسمت تقسیم میکند بخش مدیریت داده بنام model، بخش منطق برنامه بنام controller و بخش نمایش داده به کاربر بنام view. این نوع معماری برای پروژه های متوسط و بزرگ از نظر کد نویسی مناسب هست و مثال استفاده از آن برای پروژه های ساده و کوچک مثل کشتن پشه با پتک میباشد. خیلی ها معتقدند که در این مدل کد نویسی بیشتری داریم انجام میدیم! که البته برای پروژه های کوچک درست میباشد.

view داده مورد نیاز خودش برای نمایش را از model دریافت میکند. زمانی که کاربر با برنامه تعامل میکند controller پاسخگوی مستقیم دستورات کاربر میباشد و مدل را تغییر میدهد و در نهایت مدل view را از تغییرات با خبر میکند و view نمایش داده را بروزرسانی میکند. این خلاصه معماری mvc میباشد.

در پروژه های angularJs مدل همان Document Object Model یا DOM میباشد که در فایلهای HTML ذخیره میشود. controller ها کلاسهای جاوا اسکریپت هستند و مدل در property های object ها ذخیره میشوند، نگفتم کلاسها چون در جاوااسکریپت برای ساخت object حتماً لازم نیست قبلش کلاس تعریف بشه! میدونم خیلی از برنامه نویس ها با تجربه در زبانهای c و java به خاطر loose type بودن جاوااسکریپت زیاد ازش خوششون نمیاد.

علت استفاده از مدل MVC در انگولار آشنایی برنامه نویسان با آن و همچنین ارائه یک مدل ذهنی مناسب برای اینکه چی کجا باید قرار بگیره اعلام شده.

Data Binding و یا اتصال مدل به view

همانطور که اشاره شد در گذشته زبانهای برنامه نویسی سمت سرور همچون PHP و ASP به ما با ترکیب رشته های HTML با داده در سمت سرور و ارسال آن به کلاینت در ایجاد رابط کاربری کمک کرده اند. سپس Jquery به ما این قابلیت را داد که تنها بخشهای مورد نیاز HTML یا DOM را با داده ترکیب کنیم و ما را از رندر کل صفحه خلاص کرد. اما یک مشکل وجود داشت و آن حجم زیاد کد نویسی برای هم فاز نگه داشتن UI یا رابط کاربری یا همون چیزی که کاربر داره میبینه با داده های موجود در property های object های جاوا اسکریپت بود. منظور از data binding نیز همین عمل میباشد هم فاز نگه داشتن مدل با view.

یکی از جاهایی که angular کار ما را خیلی ساده کرده همین بخش data binding هست که بدون هیچ کد نویسی و تنها با رعایت یکسری قواعد نانوشته اما عرف data binding به صورت خودکار برای ما انجام میشود. تنها کاری که ما باید انجام بدهیم این هست که به انگولار بگوییم کدام داده به کدام بخش از view باید map شوند و هر وقت مدل تغییر کرد view به صورت خودکار آپدیت میشود.

خودم هم دفعه اول باورم نمیشد تا اینکه این مثال را دیدم و اجرا کردم:

این هم نمونه آماده اجرای کد بالا:

{{greeting.text}}, World

همانطور که ملاحظه میکنید همزمان با تایپ در textbox مقدار تگ p تغییر میکند و هیچ کدی برای ثبت و الصاق event listener ها و همچنین callback ها نوشته نشده است و تمامی عملیات databinding به صورت خودکار انجام میشود.

Dependency Injection یا تامین نیازمندیها

همانطور که اشاره شد در این مثال ساده خیلی کارها پشت پرده در حال انجام و شکل گیری هستند به طور مثال $scope ما ننوشتیم اما به صورت اتوماتیک در اختیار ما در کنترلر قرار میگیرد که کار اصلی databindig را انجام میدهد. به طور خلاصه کنترل ما به این object نیاز دارد (Dependency) و به صورت اتوماتیک توسط انگولار در اختیار آن قرار میگیرد و یا به آن تزریق (Injection) میشود.

در بخشهای آینده خواهیم دید که $scope تنها object ای نیست که توسط انگولار میتواند به کنترلهای ما تزریق شود. به طور مثال اگر ما بخواهیم از آدرس URL بروزر کاربر در کنترل خود استفاده کنیم میتوانیم کنترلر خود را به object ای با نام $location وابسته کنیم که این object توسط انگولار به کنترل ما تزریق میشود. مانند:

این مدل به نام Law of Demeter شناخته میشود همچنین به آن قاعده کم فهمی نیز گفته میشود. شاید یه مقدار اسمش بد باشه اما منظور این هست که مثلاً در مثال بالا کار HellorController مقدار دهی اولیه به مدل میباشد و نیازی ندارد که نگران این باشد که $scope چگونه و توسط کی ساخته و به آن تزریق میشود.

Directive ها یا راهنماها

یکی از بهترین بخشهای angular این هست که به ما اجازه میدهد که قالبها یا view های خود را با استفاده از html تعریف کنیم. علت هم قابلیت بسط و گسترش html توسط انگولار هست. حالا منظور از این بسط و گسترش چیست؟ در طول مثالهای گذشته دیدید که از یکسری خصیصه جدید مانند ng-controller و ng-model برای تگهای گوناگون html استفاده کردیم، خوب این یک نوع بسط دادن html هست. همچنی شما میتوانید با استفاده از API انگولار تگهای کاملاً جدید ایجاد کنید مانند <my-menu></my-menu> هدف اصلی از ایجاد چنین directive هایی امکان استفاده مجدد از کد در view ها میباشد. اگر با Component ها در ASP.Net آشنا باشید میشه گفت تغریباً از نظر ساختاری Directive ها به ما کمک میکنند تا Component های مختلفی برای view ایجاد کنیم و به جای کد نویسی مجدد آنها تنها از تگهای حاصل از بسط HTML استفاده کنیم.

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