آشنایی با امکانات فریم ورک جاوا اسکریپتی Angular.js(قسمت اول)

طراحی وب

طراحی وب

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

طراحی وب

بخش اصلی در طراحی وب و وب اپلیکیشن ها بخش front-end است که اکثرا با فریم ورک های جاوااسکریپتی ساخته میشود.داشتن قالب سایت اصولی نه تنها باعث جذب بازدیدکننده بیشتر میشود و میتواند رتبه در گوگل رو افزایش بدهد و در رتبه بندی سایت تاثیر زیاد دارد بلکه کمک بسیاری در سئو سازی سایت میکند. فریم ورک بخش اصلی کار را انجام میدهد تا در نهایت وب اپلیکیشنی با قالب واکنش گرا و بدون رفرش صفحات داشته باشیم.،آنگولار یکی از این فریم ورک های جاوااسکریپتی است.این فریم ورک توسط شرکت گوگل و در سال 2012 ارائه شده و در واقع به نیاز برنامه نویسان به یک معماری جدید در سمت کلاینت به خوبی پاسخ گفته است.

در برنامه نویسی وب هر تبادل داده با دیتابیس منجر به رفرش شدن صفحه میشد تا اینکه با پیدایش ajax دیگر نیازی به رفرش شدن کل صفحه نبود بلکه تنها قسمتی از صفحه که نیاز به آپدیت شدن داشت با استفاده از جاوااسکریپت آپدیت میگردید.در واقع برنامه نویس داده خام را از دیتابیس میگرفت و در سمت کلاینت با استفاده از جاوااسکریپت html را تولید میکرد.این روش در تولید صفحات پیچیده تر و همچنین برنامه های تک صفحه ای (SPA) با شکست مواجه شد زیرا کدنویسی پیچیده تر و زمانبر تر شد و همچنین آپگرید پایین داشت.

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

آنگولار فریم ورکی است که از css ، html و جاوااسکریپت استفاده میکند ، آنها را توسعه میدهد، معایب آنها را برطرف کرده است و به بهترین شکل معماری MVC را پیاده سازی میکند.آنگولار با سایر فریم ورک ها و کتابخانه های جاوااسکریپتی تداخلی ندارد و بسیار سبک و کم حجم (60کیلوبایت )است.این فریم ورک ساخت مهندسان و برنامه نویسان شرکت گوگل است پس ساختاری مطمئن ، استوار و قابل اعتماد دارد .

در ابتدا برخی از ویژگی های آنگولار را شرح میدهیم.

تمپلیت های سمت کلاینت : :



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

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

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

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

از هیچ کلاس یا آی دی برای الصاق event listeners به html استفاده نشده است.
زمانی که HelloController مقدار Hello را به greeting.text میدهد ما هیچ event listener و یا callback ای برای بروزرسانی قالب ثبت نکردیم.
HelloController یک کلاس ساده جاوا اسکریپت هست و از هیچ کلاس دیگری به ارث نبرده است.
ما constructor کلاس HelloController را صدا نزدیم.

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

در قسمت های بعدی معرفی فریم ورک آنگولار همراه باشید.