در این قسمت به شرح و بررسی توانمندیهایی خواهیم پرداخت که سبب شده این تکنولوژی نسبت به رقبای خود قوی تر و شاخص تر ظاهر شود.درواقع Two-Way-Binding یکی از اصلی ترین توانمدیهای AngularJS به حساب می آید . این مدل از DataBinding یعنی برقرار یک ارتباط اتوماتیک کاملن اسکرون بین View و Model که در این تکنولوژی در عمل متغیرها و متدهای JavaScript می باشند .
توانمندیهای شاخص AngularJS
در این قسمت به شرح و بررسی توانمندیهایی خواهیم پرداخت که سبب شده این تکنولوژی نسبت به رقبای خود قوی تر و شاخص تر ظاهر شود.
1- پیاده سازی قدرتمند Two-Way-Binding
درواقع Two-Way-Binding یکی از اصلی ترین توانمدیهای AngularJS به حساب می آید . این مدل از DataBinding یعنی برقرار یک ارتباط اتوماتیک کاملن اسکرون بین View و Model که در این تکنولوژی در عمل متغیرها و متدهای JavaScript می باشند . در AngularJS ما یک Template ایجاد میکنیم و سپس کامپوننتهای مختلف را به Model ها Bind مینماییم. در این حالت به محض تغییر مقادیر Model ، به صورت اتوماتیک View هم دستخوش تغییر خواهد گردید. به زبان ساده تر ، AngularJS تغییرات درون Model را تشخیص داده و بروز تغییرات در View را گارانتی خواهد نمود . وجود این قابلیت اتوماتیک شما را از دردسر نوشتن حجم عظیمی از DOM کدها و ... در امان نگه خواهد داشت. در قسمتهای بعدی ، بر روی این مبحث به تفصیل صحبت خواهیم نمود .
2- وجود یک روال مشخص برای کدهای سمت کلاینت
برنامه نویسان همواره بر روی کدهای سمت سرور خود بسیار حساس و غیرتی میباشند ، ولی کدهای سمت کلاینت وضعیتی آشفته و بی قانون خواهند داشت . این وضعیت در سیستمهای بزرگ و مبتنی بر روالهای سمت کلاینت ، میتواند دردسر ساز شود ضمن اینکه تست و تغییر کدها در یک روال نامشخص میتواند سخت و وقت گیر شود . با ورود AngularJS ، شما میتوانید یک سیستم با Structure مشخص و کامل قابل تست و مرتب ایجاد کنید . با استفاده از این تکنولوژی ، دیگر تولید و تعمیر کدها یک دردسر نخواهد بود و برای مدیران پروژه هم وضعیت بهتری ایجاد خواهد شد .
3- Model View Whatever
برای این آیتم معادل فارسی پیدا نکردم . به همین نامگذاری اصلی آن بدون هیچ ترجمه ای بسنده کنیم ، بهتر است . AngularJS به MVW بودن معروف است . این یعنی Model-View و برای قسمت بعدی ، هر آنچه به شما کار میدهد را بردارید و استفاده کنید . AngularJS را میتوان هم در استانداردهای MVC و هم MVVM استفاده نمود ،ولی نکته مهم این است که میتوان سیستمهای بزرگ تحت وب را با کمترین هزینه و دردسر ایجاد نمود. در قسمتهای بعدی همه این مفاهیم و مباحث را به صورت عملی مشاهده خواهیم نمود.
4- ساپورت Routing
برنامه های تک صفحه ای امروزه همه جا مطرح و متداول شده اند . با ظهور HTML 5 ، دیگر کسی علاقه ای به پرتاب کردن کاربر به صفحات جدید به ازای هر کلیک و حرکت ندارد . در عوض باید بخشی از محتوا که باید تغییر کند را توسط یک روال اسکنرون تعویض یا URL را در Browser عوض کرده تا محتوای مورد نیاز نمایش داده شود . خیلی از سایتهای بزرگ مانند توییتر ، این کار را انجام میدهند . این روند سبب میشود کاربر احساس کند انگار در حال استفاده از یک Desktop App میباشد . این کار توسط AngularJS با کمترین دردسر امکان پذیر است . در واقع AngularJS اصلن با وجود این تواناییها در هسته خود ایجاد شده است و میتواند برای URL های مختلف ، View های مختلف را هندل کند . در عمل AngularJS به ازای هر URL ، View متناسب را Load خواهد نمود . به دلیل خورد کردن پروژه به بخشهای کوچکتر مبتنی بر استانداردههای AngularJS ، هر گونه تغییر و تعمیر هم ساده تر خواهد بود. همه این توانمندیها به دلیل وجود یک هسته Routing قوی در AngularJS می باشد که در مقالات بعدی باید به طور مفصل به آن بپردازیم.
5- وجود Templating مبتنی بر HTML
قواعد Templating در AngularJS مبتنی بر همان استاندارههای قدیمی HTML میباشد . به دلیل استفاده از Plan HTML ، برنامه نویس و طراح لازم نیست همواره با همدیگر هماهنگ شوند و در کارهای یکدیگر دخالت کنند . طراحان می توانندUI های خود را به همان روش عادی خود طراحی کنند و برنامه نویسان نیز میتوانند از آنها به سادگی استفاده در Data Model را به UI Component ها متصل و سیستم را طراحی نمایند. به عنوان مثال ، عبارت {{name}} میتواند بیانگر نمایش مقدار Name از طرف Model باشد . در بخشهایی مجزا به مبحث Templatingخواهیم پرداخت .
6- بهبود روالهای UX از طریق Form Validation
فرمها اصلی ترین بخش از یکCRUD (Create, Read, Update, Delete) می باشند . ایجاد Feedback برای کاربر یکی از قسمتهای مطرح در UX می باشد . هسته AngularJS یک Real Time Validator به همراه قابلیت Custom کردن و تغییر CSS ها و ... به شما میدهد. مبحث Form Validation هم یکی از مباحثی است که در آینده باید به صورت مفصل به آن پرداخته شود .
7- ایجاد یک Syntax جدید در HTML توسط Directive ها
از طریق Directive ها شما یک راه جدید برای ایجاد آنچه در HTML به صورت Native ساپورت نمیشود خواهید داشت . شما میتوانید Element های جدید یا Attribute های جدید بسازید و آنها را در HTML استفاه کنید . برای مثال ، در HTML به صورت پیش فرض ، DateTimePickerنداریم ، ولی میتوان با ایجاد یک Directive جدید این ابزار را ایجاد و از آن استفاده نمود. مبحث Directive ها در AngularJS کاملن اختصاصی و Unique می باشد .
8- داشتن قابلیت Embed شدن ، Test پذیر بودن و Injectable بودن
یکی از جنبه های خوب AngularJS این است که میتوان آنرا با دیگر تکنولوژیها به سادگی درگیر کرد . قبلن در مورد تست پذیری صحبت کرده ایم . Testable بودن یک تکنولوژی سبب میشود بتوان پروژه را در حین طراحی و تولید رفع Bug نمود و خطاهای آنرا رفع نمود . به دلیل مدرن بود AngularJS شما با یک پلتفرم با قابلیت TDD روبرو هستید که روالهای Unit و End-to-End را به آسانی میتوان با استفاده از آن پیاده کرد . در عمل دیگر هیچ دلیل و بهانه ای برای تست نکردن پروژه در حین تولید وجود ندارد .
9- توانایی Dependency Injection
در عمل میتوان Dependency Injection را اینگونه تعریف کرد . کدهای شما نیاز به دریافت و تهیه نیازمندیهای خود نیستند . در اصل نیازمندیهای هر بخش به صورت اتوماتیک توسط Dependency Injection Container به هر بخش تزریق خواهد شد . با این شکل از پیاده سازی ، هر کامپوننت در یک پروژه ، به صورت مستقل ولی در حال کار با دیگر اعضا میباشد و توسعه دهنده میتواند بسادگی در یک وضعیت Isolate اقدام به تست هر بخش نماید . AngularJS کاملن DP را ساپورت میکند و به شما اجازه میدهید پروژه هایی کاملن Testable و Maintainable تولید کنید.
10 – طراحی شده توسط گوگل و یک تیم حرفه ای بزرگ
این تکنولوژی زیر دست Google بوده و یک تیم بزرگ و حرفه ای آنرا حمایت میکند . این محصول Open Source است و زیر لایسنس MIT درGitHubبرای دانلود در اختیار عموم قرار گرفته است . میتوانید آنرا دانلود کنید و اگر بلد باشید حتی آنرا دستکاری کنید . برای کمک به شما حتی Document هم وجود دارد . از طریق StackOverFlow یا فرم SitePoint می توانید سوالات خود را مطرح کنید و جواب بگیرید. ورژنهای بالاتر سریعا در حال Release شدن است و تیم توسعه آن به سرعت در حال کار بهبود آن میباشند . به این دلایل ، مشتاقان و استفاده کنندگان این تکنولوژی روز به روز به رو افزایش است ، چرا که منابع آموزشی برای آن بسیار فراوان و در دست میباشد . خوب امیدوارم با ذکر این دلایل دیگر جذب شده باشید و این مباحث را دنبال کنید . به زودی اولین APP خود را مبتنی بر AngularJS شروع خواهیم کرد .
چرا نام این تکنولوژی AngularJS گذاشته شده ؟.
ظاهرا به دلیل Angel Bracket بودن HTML این نام انتخاب شده است .