AngularJs از سیر تا پیاز – قسمت اول

AngularJS یک فریمورک جاوا اسکریپتی است که برای توسعه ساده تر و قوی تر برنامه های تحت وب تک صفحه ای یا SPA است. ابتدا خلاصه ای در مورد SPA توضیح می دهم و سپس به AngularJs می پردازم.

Single Page Application

برای اینکه بهتر این موضوع را درک کنید می توانیم Gmail را مثال بزنیم. همانطور که در Gmail مشاهده می کنید وقتی ایمیل خود را باز می کنید بدون آنکه صفحه reload شود به صفحه دیگری هدایت می شوید. اگر در نوار آدرس مشاهده کنید می بینید که آدرس تغییر کرده اما صفحه reload نشده است. پس یکی از ویژگی های SPA بارگذاری مجدد نشدن صفحات وب است. مزیتی که این روش دارد این است که شما با زدن دکمه back و forward می توانید به صفحه قبل یا بعد بروید بدون آنکه صفحه بارگذاری مجدد شود. همچنین به موتورهای جستجو کمک می کند تا جداگانه هر صفحه ای را index کند.

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

شاید این سوال پیش بیاید که چه زمانی نیاز هست تا سراغ SPA برویم؟ همانطور که می دانید سیستم های تحت وب به دو دسته تقسیم می شوند:

۱- web documents

۲- Web Application

web documents همان وبسایت های معمولی هستند که یک سری اطلاعات یا محتوا را نشان می دهند که نیازی با استفاده از spa برای اینطور صفحات نیست. اما برای web application ها نیاز هست تا کاربر بدون آنکه از صفحه ای به صفحه دیگر برود و زمانی را برای بارگذاری مجدد صفحات صرف کند، کار خود را انجام دهد به عنوان مثال صفحاتی مانند Gmail، Facebook، Azure و غیره.

قبل از اینکه سراغ AngularJs برویم ابتدا باید بدانیم که یک صفحه وب چگونه در مرورگر ما دریافت می شود.

دریافت صفحات وب در مرورگر

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

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

AngularJs چیست؟

یک قریمورک متن باز جاوا اسکریپتی است که برای توسعه هر چه ساده تر برنامه های تحت وب تک صفحه ای با الگوی طراحی MVC است. این فریمورک توسط یکی از محققان Google در سال ۲۰۰۹ به وجود آمد. در سال ۲۰۰۹ تیمی از Google بر روی پروژه ای با نام Google Feedback مشغول کار بودند. آنها می خواستند طی چند ماه کدهای خوب و قابل تست بنویسند که در نهایت منجر به ۱۷۰۰۰ خط کد شد. یکی از اعضای این تیم به نام میسکو هوری (Misko Hevery)، ادعا کرد که می تواند این پروژه را در دو هفته و با تعداد خط کد کمتر بنویسد. پس از سه هفته توانست با ۱۵۰۰ خط کد پروژه را بازنویسی کند. پس از این قضیه میسکو و برد (Brad) بر روی Angular کار کردند.

تفاوت Angular با فریمورک های دیگر

در فریمورک های جاوااسکریپت دیگر، به عنوان نمونه jQuery، برای اینکه بخواهیم دکمه ای را در DOM قرار دهیم باید بدانیم که این شی را در کجا قرار می دهیم و همچنین باید آن را در مکان مناسبی قرار دهیم:

a

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

AngularJs، از سوی دیگر، به HTML سازگاری MVC را می دهد که این باعث می شود تا برنامه های سمت کاربر موثر و کارا بسازید. در واقع شما را قادر می سازد تا به جای اینکه در داخل یک صفحه  یک برنامه AngularJs داشته باشید، بخشی از صفحه را به عنوان یک برنامه کپسوله سازی کنید. یعنی به جای اینکه شما یک سری کد های جاوااسکریپتی و یا Angular را در داخل یک صفحه بنویسید بیایید آن قطعه را به عنوان یک Application در نظر بگیرید و در داخل هر صفحه که میخواهید از آن استفاده کنید، فقط کافی است آن App را صدا بزنید. در حالی که فریمورک های دیگر مانند jQuery این قابلیت را ندارند. این قابلیت باعث می شود تا کتابخانه های کوچک و کم حجمی را زمانی که فشرده و minify می کنید، داشته باشید.

در بخش بعدی در مورد انقیاد داده و انواع آن و همچنین ساخت برنامه Hello World با Angular صحبت خواهم کرد.

منبع: کتاب ng-book

۳ دیدگاه به ثبت رسیده است .

  1. Ali می‌گه:

    ممنون مفید بود
    لطفا هرموقع درمورد ساخت برنامه Hello World با Angular مطلب گذاشتید من را باخبر کنید

  2. مجتبی می‌گه:

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

    • آرش خوشبخت می‌گه:

      سلام ممنون از نظرتون متاسفانه خیلی سرم شلوغه وقت نکردم ادامه بدم انشالله در اولین فرصت ادامه میدم

مشترک خبرنامه شوید

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

نقش مدیر تضمین کیفیت

نقش مدیر تضمین کیفیت در چابک چیست؟ آیا ما واقعا ...

چگونه وارد کار تست ن

مثل همه ی کارها، کار تست نرم افزار و انتخاب ...

ابزارهای مفید برای ت

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

BDD Best Practice

معرفی BDD BDD یا توسعه رفتار محور یک متدولوژی است برای ...

Agile Test Strategy

در محیط چابک یا agile، جایی که ما روی اسپرینت ...