دوره آموزش AngularJS – معرفی

0004 Learn Angularjs Course Beginner - Introduction

دوره آموزش AngularJS – معرفی

زبان نشانه‌گذاری فرا‌متن (HTML – HyperText Markup Language) در سال ۱۹۹۰ توسط Tim Berners-Lee، ساخته شده. در ابتدا HTML تنها برای ساخت صفحات وب استاتیک استفاده می‌شد که با استفاده از فرا‌پیوند (Hyperlink)‌ها میتوانستیم این صفحات را به هم متصل کنیم و در بین آنها بگردیم. پس از آن در سال ۱۹۹۳، واسط دروازه‌ی مشترک (CGI – Common Gateway Interface) معرفی شد، که این امکان را میداد تا صفحات پویا (Dynamic) را که در سمت سرور ساخته می‌شدندبه کاربر ارایه شوند. در نتیجه زبان‌های جدیدی همچون پرل (Pearl)، پی‌اچ‌پی (PHP)، جاوا (JAVA)، ای‌اس‌پی (ASP) و.. برای تولید این صفحات پویا ارایه شدند.

بدلیل اینکه اینگونه زبان‌ها و تکنولوژی‌های جدید، تنها معطوف به سمت سرور بودند، هنوز تولید برنامه‌های تحت وبی که بتواند تجربه‌ای شبیه به برنامه‌های دسکتاپی ارایه دهند ناممکن به نظر میرسید. البته در این بین ارایه Flash و Silverlight توانست تولید برنامه‌های تحت وب به تجربه کاربری مناسبی‌ را با استفاده از پلاگین‌ها ممکن سازد.

اما، در نهایت راهکاری اصلی و مناسب بدون هیچگونه پلاگین اضافه‌ای با گسترش قالبیت‌های HTML، CSS و Javascript بوجود آمد. قابلیت‌هایی که اجازه ارایه تجربه‌ی کاربری بسیار مناسبی در برنامه‌های تحت وب میدادند.

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

معرفی AngularJS

در سال ۲۰۰۹ این فریمورک توسط Miško Hevery و Adam Abrons ساخته شد. اما ظهور آن،‌ در سال ۲۰۱۰ بود. زمانیکه Hevery بر روی پروژه‌ی Google Feedback، کار می‌کرد. این پروژه در نهایت با ۱۷ هزار خط کد به پایان رسید. اما گروه از سرعت تولید و همچنین تعداد خط کد‌های آن راضی نبودند. برای همین Hevery شرط بست که این پروژه را با فریمورک خودش در طی دو هفته بازنویسی می‌کند. بعد از سه هفته و تنها با ۱۵۰۰ خط کد او پروژه را آماده کرد. اینروزها فریمورک او در بیش از ۱۰۰ پروژه‌ی گوگل مورد استفاده قرار می‌گیرد. نام فریمورک هم توسط Abrons، بدلیل علامت شروع تگ در HTML، یعنی “<” انتخاب شد.

AngularJS چیست؟

AngularJS یک فریمورک ساختاری برای ساخت اپلیکیشن‌های تحت وب است. این فریمورک به شما اجازه می‌دهد تا از زبان HTML بعنوان زبان قالب خود استفاده کنید و با توسعه‌ی آن بتوانید اجزاء (Component) مختلف اپلیکیشن خود را به خوبی بسازید. انقیاد داده (Data Binding) و تزریق وابستگی (Dependency Injection) این فریمورک، بسیاری از کد‌هایی که می‌بایست برای اپلیکیشن نوشته شود، حذف شوند. و تمام این ویژگی‌ها در مرورگر اتفاق می‌افتد که باعث می‌شود اپلیکیشن از تکنولوژی سمت سرور مجزا شود.

AngularJS همان چیزیست که HTML برای طراحی اپلیکیشن می‌بایست می‌بود. HTML یک زبان عالی برای توصیف صفحات استاتیک است. اما برای تولید اپلیکیش‌های پویا قابلیت‌های محدودی دارد و باعث می‌شود برای تولید اپلیکیشن نیاز باشد که این سوال را از خود بپرسید: “باید چکار کنم تا مرورگر را وادار به انجام آن کار مشخصی که می‌خوام بکنم؟”

تفاوت میان یک سند استاتیک و یک اپلیکیشن پویا را میتوان با دو مفهموم مشخص کرد:

  • یک کتابخانه ‌‌‌(Library) – مجموعه‌ای از توابع که برای ساخت اپلیکیشن مفید هستند. کد شما مسئول اپلیکیشن است و هرکجا که نیاز باشد از توابع کتابخانه استفاده میکند. نمونه: jQuery
  • فریمورک (Framework) – یک پیاده سازی خاص از اپلیکیشن تحت وب، که کد شما براساس آن نوشته میشود. فریمورک مسئول اپلیکیشن است و هرکجا نیاز باشد کد‌های شما فراخوانی میشود. نمونه: durandal، ember

اما AngularJS راه دیگری را انتخاب کرده است. AngularJS برای کاهش تفاوت میان یک سند استاتیک و یک اپلیکیش پویا، ساختار‌های HTML جدیدی را می‌سازد. AngularJS این ساختار‌های جدید را با مفهوم Directive به مرورگر می‌فهماند. همانند:

  • انقیاد داده : {{}}
  • ساختار‌های کنترل DOM برای تکرار، نمایش و عدم نمایش بخش‌های آن
  • پشتیبانی از فرم‌ها و اعتبار سنجی فرم‌ها
  • اتصال رفتار جدید به المان‌های DOM، همچون رسیدگی به رخداد‌ها (Event Handling)
  • کنار هم قرار دادن HTML برای تولید اجزاء (Component) با قابلیت استفاده مجدد

راهکار کاملی برای اپلیکیشن سمت-کاربر

AngularJS یک قطره‌ی کوچک در اقیانوس نیاز‌های اپلیکیشن سمت-کاربر نیست. بلکه تمام کد‌هایی که برای مدیریت DOM و AJAX که قبلا نوشته‌اید را به شکل ساختاریافته‌ای در کنار هم قرار می‌دهد. این نکته، باعث می‌شود که AngularJS بصورت خود رای مشخص کند که یک اپلیکیشن سمت-کاربرِ CRUD‌ (سرواژه‌ی عبارت‌های تولید (Create)، خواندن (Read)، به‌روزرسانی (Update) و حذف کردن (Delete)) چگونه ساخته شود. با تمام خود رای‌ای که AngularJS دارد، اما تلاش می‌کند تا نظرش برای توسعه‌دهنده تنها به عنوان یک نقطه‌ی شروع باشد و آنرا بتوان به راحتی تغییر داد. AngularJS با ویژگی‌های زیر عرضه می‌شود:

  • تمام قابلیت‌هایی که برای ساخت یک اپلیکیشن CRUD نیاز دارید به شکل یکپارچه: انقیاد داده، Dircetive‌های پایه قالب، اعتبارسنجی فرم، مسیر‌یابی، ارتباط عمیق (deep-linking)، کامپوننت‌ها با قابلیت استفاده مجدد و تزریق وابستگی
  • نیاز‌های آزمون‌پذیری: Unit-testing، end-to-end testing و…
  • ارائه‌ی شکل ساختاری اولیه پروژه‌ی اپلیکیشن تحت وب سمت-کاربر

AngularJS برای کدام اپلیکیشن‌ها مفید است؟

AngularJS پروسه‌ی تولید اپلیکیشن را با ارائه‌ی یک سطح بالاتر از تجرید (Abstraction) به توسعه دهنده، ساده می‌کند. همانند هرگونه تجرید، هزینه‌ی این تجرید جدید، انعطاف‌پذیری است. به بیان دیگر، هر اپلیکیشن تحت‌وبی را نمی‌بایست با AngularJS نوشت. AngularJS با در نظر گرفتن یک اپلیکیشن CRUD توسعه یافته است. خوشبختانه اپلیکیشن‌های CRUD درصد بسیار بالایی از اپلیکیشن‌های تحت وب سمت-کاربر را تشکیل می‌دهند. برای درک اینکه برای کدام گونه از اپلیکیشن‌ها AngularJS مفید است، بهتر است نمونه‌هایی از اپلیکیشن‌هایی که بهتر است از آن برای توسعه‌شان استفاده نشود را مثال زد.

بازی‌ها (Games) و ویرایشگر‌های با رابط کاربری گرافیکی (GUI Editor)، نمونه‌هایی هستند که نیازمند دستکاری فشرده و زیاد برروی DOM هستند. اینگونه از اپلیکیشن‌ها با اپلیکیشن‌های CRUD تفاوت اساسی دارند و در نتیجه استفاده از AngularJS برای آنها مناسب نیست. در اینگونه موارد بهتر است تا از کتابخانه‌هایی که سطح پایین تری از تجرید را دارند، مورد استفاده قرار گیرند. همچون jQuery

تفکر به سبک AngualarJS

AngularJS بر اساس این اعتقاد که کد اعلانی (Declarative Code)، در زمینه‌ی ساخت رابط کاربر (UI) و کنارهم قرار دادن کامپوننت‌های یک نرم‌افزار بر کد دستوری (Imperative Code) ارجحیت دارد، ساخته شده است. در حالیکه کد دستوری برای ابراز منطق کار (Business Logic) از کد اعلانی مناسب‌تر است. در نتیجه، برای استفاده بهینه از AngularJS میبایست تفکری به سبک آن پیدا کنید. یعنی:

  • ایده‌ی بسیاری خوبی است که دستکاری در DOM را از منطق اپلیکیشن جدا کنید. این ویژگی آزمون‌پذیری اپلیکیشن را بهبود می‌بخشد.
  • ایده‌ی بسیار بسیار خوبی است که به آزمون اپلیکیشن همانقدر توجه کنید که به نوشتن‌ آن توجه می‌نمایید. میزان سختی آزمون‌ یک اپلیکیشن بصورت غیرقابل تصوری به چگونگی ساختار اکد اپلیکیشن وابسته است.
  • ایده‌ی عالی‌ای است که بخش سمت-کاربر (Client-Side) یک اپلیکیشن را از بخش سمت-سرور (Server-Side) آن جدا کرد. اینکار باعث می‌شود که توسعه‌ی اپلیکیشن بصورت موازی انجام بپذیرد.
  • بسیار مفید است که، فریمورک توسعه‌دهنده را در طی کل فرآیند تولید اپلیکیشن راهنمایی کند. از طراحی رابط کاربری، تا نوشتن منظق کار و یا آزمون اپلیکیشن.
  • بسیار خوب است که وظایف پر استفاده را بدیهی کرد و وظایف سخت را شدنی کرد.

در نتیجه AngularJS شمارا از اینگونه درد‌های توسعه و طراحی آزاد می‌سازد:

  • ثبت Callbackها: ثبت Callback کد شمارا درهم ریخته می‌کند. پس حذف آنها بسیار مفید است. این ویژگی باعث می‌شود تا حجم کدی که می‌بایست بنویسید بصورت غیرقابل باوری کاهش یاید و به خوبی بتوان کد زده شده برای اپلیکیشن را کاهش داد.
  • دستکاری DOM بصورت برنامه‌نویسی شده: دستکاری DOM بخش اساسی اپلیکیشن‌هایی است که با AJAX نوشته شده اند. اما این وظیفه مستعد خطا است. اما با توصیف اعلانی نحوه برخورد رابط کاربری در مواجهه با تغییرات، شما از وظایف سطح-پایین دستکاری DOM آزاد می‌شوید.
  • هدایت داده‌ها از/به سمت رابط کاربری: عملیات CRUD بخش اعظمی از اپلیکیشن‌های AJAXای را تشکیل می‌دهند. جریان هدایت داده‌ها از سمت سرور به یک شی درونی و سپس یک فرم HTML، ویرایش فرم، اعتبارسنجی فرم، نمایش اخطار‌های اعتبارسنجی، بازگشت به یک مدل داخلی و در نهایت به سمت سرور، نیازمند نوشتن خطوط کد مشترک زیادی است. اما AngularJS بسیاری از این کد‌ها را حذف می‌کند و اجازه می‌دهد تا تنها جریان کلی انتقال داده‌ را مشخص کرد و پیاده‌سازی آنرا به AngularJS سپرد.
  • نوشتن حجم زیادی از کد‌های مقداردهی اولیه (Initialization) تنها برای شروع برنامه: عموما برای ساخت یک اپلیکیشن ساده “سلام دنیا!” با استفاده از AJAX نیاز به کد‌های اولیه زیادی است که باید نوشته شود. اما با AngularJS عملیات مقدار‌دهی اولیه اپلیکیشن را می‌توان به راحتی با استفاده از سرویس‌ها انجام داد و آنها را به استفاده از تزریق وابستی در اپلیکشن مورد استفاده قرار داد. این ویژگی این قابلیت را می‌دهد تا توسعه اپلیکیشن را به سرعت شروع کرد و همچنین فرآیند آزمون اپلیکیشن را ساختار‌یافته‌تر کرد.

درباره دوره آموزش AngularJS

دوره آموزش AngularJS دوره‌ای برای آشنایی با فریمورک AngularJS از سطح مبتدی تا متوسط است. در طی دوره آموزش AngularJS از ساده‌ترین مفاهیم این فریمورک شروع خواهیم کرد و گام به گام با ویژگی‌ها، امکانات و نکات تولید برنامه‌ی تک صفحه‌ای (SPA – Single Page Application) با الگوی MVC آشنا خواهیم شد.

لینک‌ها