آشنایی با فریم ورک Angular.js
امروزه زبان جاوا اسکریپت در دنیا بسیار محبوب است و توسعه دهندگان زیادی رو مجذوب خود کرده است. برای استفاده از تمام قدرت این زبان محبوب و ساخت اپلیکیشن های نوین، توسعه دهندگان از فریمورک های زبان جاوا اسکریپت استفاده می کنند. Angularjs (انگولار) یکی از پر طرفدار ترین فریمورک های جاوااسکریپت است که میتوان با آن به پیاده سازی اپلیکیشن برای وب،موبایل و دسکتاپ پرداخت. React و Vuejs دو فریمورک دیگر جاوا اسکریپت هستند. اگر قصد یادگیری فریمورک انگولار را دارید با ما در این مقاله همراه باشید تا آشنایی لازم رو بدست بیارید.
معرفی فریمورک Angular (انگولار)
زبان جاوا اسکریپت بسیار قدرتمند است و در انجمن های تخصصی دنیا از این زبان و فریمورک های آن به خصوص Angular به عنوان آینده برنامه نویسی نام برده می شود. Angular یک فریمورک و چهارچوب جاوا اسکریپتی است که برای ساخت اپلیکیشن های پویا به کار میرود. امروزه با جاوا اسکریپت میتوان علاوه بر ساخت اپلیکیشن وب برای موبایل و پلتفرم های دسکتاپ نیز برنامه ساخت. انگولار کد باز است و توسط زبان جاوااسکریپت ایجاد شده است، همین امر یاعث شده تا آشنایی حتی اندک با جاوا اسکریپت برای یادگیری Angular کافی باشد. با فریمورک انگولار میتوان بهترین اپلیکیشن های وب تک صفجه ای (Single Page Application) را ساخت. در سایت های تک صفحه ای، دیتا و اطلاعات بدون بارگذاری مجدد صفحه تغییر می کند و این باعث افزایش سرعت وب سایت و جذابیت ویژه برای کاربران می شود.
انگولار جی‌اس یک چهارچوب وب اپلیکیشن متن باز است که اولین بار در سال ۲۰۰۹ توسط میسکو هوری و آدام آبرونز توسعه یافت. در حال حاضر این فریمورک توسط گوگل توسعه داده می‌شود و آخرین نسخه آن ۱٫۴٫۳ است.
بر اساس مستندات رسمی AngularJS به صورت زیر تعریف می‌شود:
“AngularJS یک فریمورک ساخت‌‌یافته برای وب‌‌اپلیکیشن‌های پویا می‌باشد. انگولار علاوه بر اینکه این امکان را به شما می‌دهد که از HTML برای طراحی قالب استفاده کنید باعث می‌شود بتوانید سینتکس‌های HTML را طوری گسترش دهید تا جزئیات وب‌اپلیکیشن‌ها را نیز به وضوح بیان نمایید.”
AngularJs یک فریم ورک برای طراحی سایت و وب اپلیکیشن تک صفحه‌ای می باشد. ممکن است شما بارها در مورد انگولار شنیده باشید اصطلاحات زیادی در مورد این فریم ورک وجود دارد اگر با این اصطلاحات آشنایی ندارید چند دقیقه وقت بگذارید تا بتوانید این اصطلاحات را یاد بگیرید.
اول از همه اینکه انگولارجی اس یک فریم ورک می باشد فریم ورک به شما این امکان را می‌دهد که کدهای خود را تکنیکی و بهینه بنویسید، تغییر بدهید و تنظیمات استاندارد را روی آن پیاده سازی کنید. با انجام این کارها شما می‌توانید برخی از ویژگی های فریم ورک را استفاده کنید. انگولار به معنی قالب سازی فیلترها ترکیب داده‌های دو طرفه و بقیه موارد است.
اگر با بوت استرپ و یا جی کوئری موبایل کار کرده باشید احتمالا با این روش کار آشنا هستید برای ساخت سایت شما می‌توانید روش خاص و منحصر به فرد خودتان را داشته باشید. انگولار جی اس برای ایجاد برنامه‌ی تک صفحه‌ای وب طراحی شده است این به این معنی می باشد که مرورگر صرف نظر از اندازه‌ی صفحه‌ی شما، آن را را بارگذاری کند. محتوای اضافی در صورت نیاز در برنامه لود می شود بنابراین نگران نباشید اگر قادر نبودید کل صفحه را لود کنید. در برخی از روش ها برای افزایش سرعت بارگذاری سایت شما، به جای کل صفحه تمام محتوایی که نیاز دارد را لود می کند.
بنابراین در یک برنامه‌ی واقعی که چیزی شبیه به این می باشد شما یک صفحه index.html دارید که می توانید ببینید چقدر کوتاه است. برای اینکه بدانید برنامه شما چطور ممکن است به نظر برسد از قسمتی استفاده کنید که نه تنها سند اصلی بلکه قسمتی از داده‌هایی که شما نیاز دارید در برنامه ی خود استفاده کنید را نشان می دهد و با کلیک بر روی هر یک از این گزینه‌ها جزئیات برای شما نمایان خواهد شد و با کلیک بر روی هر یک از آیکن‌ها به داده های مورد نظر برسید.
اگر صفحات شما لود نشد می توانید مطمئن شوید که سیستم شما در حال انجام کار دیگری مانند بارگذاری محتوا به صورت تدریجی می باشد.
هسته انگولار از جاوا اسکریپت می باشد و شما باید برای ایجاد محتویات فریم ورک از زبان جاوا اسکریپت استفاده کنید. اگر با جاوا اسکریپت آشنا باشید یادگیری انگولار برای شما راحت‌تر خواهد بود. انگولار و بطور کلی فریم ورک ها امکانات زیادی در اختیار شما قرار می‌دهند که اگر خود شما بخواهید آنها را اجرا کنید زمان زیادی از شما گرفته خواهد شد .
انگولار چگونه و چه زمانی به وجود آمد؟
در سال ۲۰۰۹ توسط دو فرد با نام های میسکو هوری و ادام آبرونز در شرکت گوگل انگولار جی اس (Angular.Js) رونمایی شد. سادگی و قدرت و ویژگی های زیاد Angularjs باعث شد تا بسیاری از توسعه دهندگان سمت آن بروند و از آن برای توسعه پروژه ها استفاده کنند.
سپس در سال ۲۰۱۶ گوگل با بازنویسی هسته اصلی انگولار جی اس نسخه ۲ این فریمورک را تحت عنوان Angular 2 منتشر کرد. نسخه ۲ انگولار علاوه بر تغییرات زیاد دارای مشکلات زیادی بود. یکی از مهم ترین مشکل آن حجم بالای پروژه نهایی بود همچنین بسیاری از تنظیمات پروژه باید به صورت دستی کانفیگ می شد و حتما برای کاهش حجم پروژه در پایان کار باید از ابزارهایی مانند WebPack استفاده می شد تا پروژه به علت حجم سنگین، با سرعت پایین اجرا نشود.
حدود یکسال بعد در بهار سال ۲۰۱۷ نسخه ۴ فریمورک محبوب را با عنوان Angular4 منتشر کرد. این نسخه بازی را نسبت به دو نسخه قبلی خود یعنی Angularjs و Angular2 برد. Angular4 بسیار سبک تر و کدنویسی با آن آسان تر بود. در سال های بعد گوگل به آپدیت ها مختلف و منتشر کردن نسخه های جدید سعی کرد تا نواقص این فریمورک را برطرف کند تا تجربه بهتری را برای توسعه دهندگان و عاشقان Angular به ارمغان آورد. Angular8 آخرین نسخه عرضه شده تا امروز است که جامعه آماری بالایی دارد و بسیاری از توسعه دهندگان از آن استفاده می کنند.
روش کار Angular
فرض کنید وبسایت خود را میخواهیم با Angular پیاده سازی کنیم. هر صفحه از وبسایت ما ممکن است از یک یا چند کامپوننت (Component) تشکیل شده است. هریک از این کامپوننت ها میتوانند دارای فرزند باشند. معمولا هر یک از ماژول های سایت را یک کامپوننت مجزا در نظر میگیرند. به طور مثال در یک صفحه یک اسلایدر تصویر خود یک کامپوننت و بخش نظرات کاربران یک کامپوننت جداگانه دیگر است. در تصویر زیر ساختاری از کامپوننت ها در Angular را مشاهده می کنید.
هر کامپوننت Angular از ۳ بخش اصلی تشکیل شده است:
۱- Template: در واقع قالب آن کامپوننت است و انگولار آن را پس از رندر به صورت خروجی HTML نمایش می دهد.
۲- Class: کلاس اصلی کامپوننت ما است که شامل کلاس ها و متغییر های جاوا اسکریپتی و توابع اختصاصی انگولار است که در نهایت خروجی را برای Template ارسال می کند.
۳- Meta data: که از نظر ظاهری مانند تگ های HTML نوشته می شود. و برای فراخوانی کامپوننت مورد نظر استفاده می شود.
ما با استفاده از انگولار درواقع قدرت HTML را دو چندان میکنیم و میتوانیم از ویژگی هایی مانند Data Binding، شرط ها و حلقه در آن استفاده کنیم.
مزایا و ویژگی های Angular
انگولار از تایپ اسکریپت استفاده می کند
برخی این مورد را مزیت و برخی عیب فریمورک Angular می دانند. اما حقیقت آن است که برای کار با انگولار باید تا حد مطلوبی به Type Script آشنا بود. اغلب معتقد هستند که استفاده از تایپ اسکریپت و برنامه نویسی شی گرا در انگولار قدرت و اختیار بیشتری به توسعه دهندگان می دهد تا بتوانند برنامه های اصولی و حرفه ای تر بنویسند اما در مقابل منتقدانی نیز هستند که آن را یک ضعف میدانند. استفاده از تایپ اسکریپت در انگولار باعث تمیزی بیشتر کد و تفکیک پذیری بیشتر پروژه می شود.
Angular بزرگ و جامع اما پرمصرف تر
انگولار فریمورک بزرگ و قدرتمندی است و معمولا در پروژه های بزرگ مورد استفاده قرار می گیرد و معمولا منابع بیشتری نصبت به سایر رقبا و فریمورک های جاوا اسکریپت از جمله فریمورک Vue js و کتابخانه React js دارد. پس بهتر است از انگولار در پروژه هایی که بزرگ هستند استفاده شود. همانطور که گفته شد Angular در نسخه ۲ بسیار سنگین بود. اما گوگل به بهبود آن و ارائه نسخه ۴ انگولار حجم آن را کاهش داد و بهینه سازی خوبی انجام شد. یکی از ویژگی های خوب انگولار قابلیت امکان اتصال دو طرفه داده در انگولار است که به لطف معماری MVVM صورت میگیرد.
مخفف Modelو V مخفف View است. وظیفه Model بازیابی داده ها از منابع است و View تنها نمایش دهنده داده ها است. در حالت معمولی وقتی داده در مدل تغییر پیدا می کند باید در View این تغییر نیز انجام شود که به صورت دستی امر بسیار خسته کننده و زمان بری خواهد بود اما وقتی از انگولار استفاده می کنید این امر به صورت خودکار انجام می شود. یعنی تمام داده ها Model به View متصل شده و پس از هرگونه تغییر، View در لحظه تغییر می کند و داده نمایش داده شده آپدیت می شود.
پشتیبانی گوگل از Angular
انگولار در شرکت گوگل توسعه داده می شود. با توجه به پیش رو بودن شرکت گوگل در تکنولوژی و استفاده از جدیدترین ابزار ها و روش در توسعه سرویس های خود، می توان به راحتی به انگولار و عملکر ان در آینده اعتماد داشت. چی بهتر از اینکه گوگل پشتیبان یک سرویس باشد؟؟ Angular توسط شرکت گوگل منتشر شده است و در فواصل زمانی کوتاه آپدیت های جدید آن ارائه می شود و روز به روز به ویژگی های ان اضافه شده و مشکلات امنیتی آن رفع می شود. پس از منتشر شدن انگولار ۴ ضعف و پس رفت انگولار ۲ به علت عملکرد ضعیف و سنگینی زیاد نادیده گرفته شد و باری دیگر این فریمورک مسیر رو به پیشرفت خود را پیدا کرده و توانسته توسعه دهندگان زیادی را عاشق خود کند.
تزریق وابستگی ها Dependency Injection در انگولار
تزریق وابستگی ها چیست و کجا کاربرد دارد؟ در برنامه نویسی اغلب توسعه دهندگان یک سری دستورات را از قبل نوشته و آماده در اختیار دارند و قصد دارند از آن ها در سایر پروژه ها و یا بخش های مختلف یک پروژه استفاده کنند اما چگونه؟ اینجا dependency injection به کمک می آید. تزریق وابستگی بعلاوه بر صرفه جویی در زمان باعث می شود به راحتی از کدها موجود خود به راحتی استفاده کنیم. در انگولار به راحتی میتوان با تعریف وابستگی های مختلف در پروژه در صورت نیاز به آن کدها به راحتی با فراخوانی، آنها را به اصلاح در پروژه خود تزریق کنیم.
معماری MVC :
در معماری mvc داده‌های شما به عنوان یک مدل شناخته می شود. اطلاعاتی که لازم داریم ممکن است از یک ساختار داده‌ای خارجی و یا یک داکیومنت json خارجی و حتی یک پایگاه داده بدست آمده باشد.
هر زمان که در مورد Views در MVC شنیدید در جریان باشید که یک قالب برای نمایش داده‌های شما اختصاص داده خواهد شد.
کنترل‌ها برچسبی هستند که می توانند داده‌ها، مدل ویو یا قالب شما را به هم وصل کنند. کنترلرها در جاوا اسکریپت نوشته می شوند اما برای اجرای Views ها و داده‌ها شما باید از انگولار استفاده کنید.
ویژگی های دیگر انگولار :
Directives :
انگولار از امکانی به عنوان دایرکتیو استفاده میکند که می‌توانید آن را در html استفاده کنید دایرکتیوها می توانند به صورت پراکنده در سراسر html شما استفاده شوند. این دستورات به انگولار اطلاع می دهند که چه کاری را انجام بدهد دستورات با حرف ng و پس از آن با یک خط آغاز میشوند.
Data binding:
اتصال داده‌ها باعث کارآمد شدن قالب می‌شود شما می‌توانید مکانی را برای تولید محتوا ایجاد کنید و بعد از آن به اطلاعات داده مربوط می‌شود .
Filters:
انگولار یک زبان فیلترینگ دارد که میتواند به یک روش خاص داده‌ها را سازمان دهی کند یا به راحتی با عناصر فرم تغییر بدهد.
Modules :
به جای ایجاد یک داکیومنت جاوا اسکریپت حجیم می توانید قابلیت‌های خود را به ماژول ها تجزیه کنید ماژول ها راحت تر از کدها محافظت می کنند.
Routes:
مسیرها در هسته برنامه‌ی تک صفحه ای قرار دارند که به شما این امکان را می‌دهند که قالب خود را به چند قسمت تقسیم کنید این قابلیتی است که در قسمت های مختلف برنامه شما وجود دارد.
جمع بندی
از ویژگی های یک موتور خوب این است که به شما این امکان را بدهد تا قالب‌هایی را با تگ‌های خاص html بنویسید، انگولار این تگ‌ها را با داده جابه‌جا میکند. به عنوان مثال تگ‌های مخصوص مثل آیتم قبلی و آیتم بعدی را داریم این تگ‌ها داخل کروشه قرار دارند و با استفاده از آنها می توانید تصویر artists را وارد قالب خود کنید اینجا جایی است که شما می‌توانید توضیحات مربوط به عکس را وارد کنید ما با استفاده از یک تگ می توانیم همه تگ‌ها را نشان دهیم که با پیوند زدن آنها به داده‌ها به یک صفحه مانند این صفحه تبدیل می شود بر خلاف دیگر موتورهای قالب‌بندی، انگولار شما را وادار نمی‌کند تا قالب را جداگانه بسازید مانند بقیه کتاب خانه‌ها قالب شما یک بخش جدایی ناپذیر از html می باشد.
یکی دیگر از ویژگی های بزرگ html طریقه کار آن با مدل داکیومنت می‌باشد در برنامه های قدیمی شما باید نگران بوجود آمدن رویداد باشید.
انگولار همچنین شامل دستوراتی برای بارگیری داده های خارجی با داشتن قابلیت توابع ajax می‌باشد. پس به راحتی می‌توانید داکیومنت های ajax را بارگذاری کنید.
برنامه‌های مدرن جاوا اسکریپت از روشی برای برنامه‌نویسی استفاده می‌کنند که به طور معمول به عنوان mvc شناخته می‌شود شما می توانید با استفاده از انگولار و این روش به اهدافتان برسید.
معایب Angular
شاید تنها عیب انگولار که البته روز به روز در حال بهبود و پیدا شدن روش های مختلف برای پوشش این ضعف است، رابطه نسبتا ضعیف با سئو است. اگر سئو برای شما مهم است بهتر است از Angular استفاده نکنید. معمولا از انگولار برای پیاده سازی داشبور های مدیریت قوی و پیاده سازی سیستم هایی که دارای محدوده از کاربران خاص هستند استفاده می شود.
چر باید از انگولار Angular استفاده کرد؟
-
توسعه وب اپلیکیشن های پویا
-
ساخت اپلیکیشن های بومی Native
-
جامعه توسعه دهندگان بالا
-
کد نویسی بهینه با ایتفاده از Template ها و Directive
-
بازار کار و درآمد مناسب
نتیجه گیری
خب همانطور که کامل بررسی کردیم Angular یکی از فریمورک های قدرتمند جاوا سکریپت برای ساخت اپلیکیشن ها پیشرو است. حتی با استفاده از انگولار قادر خواهید بود برای موبایل و دسکتاپ برنامه بنویسید. انگولار نسبت به سایر رقبا خود از منابع بیشتر استفاده می کند و برای پیاده سازی پروژه های بزرگ مناسب تر است. این فریمورک در شرکت گوگل منتشر شده است و توسط گوگل توسعه داده می شود و در بازه های زمانی کوتاه آپدیت های جدید ان ارائه شده و مشکلات امنیتی آن رفع می شود. تقریبا هر توسعه دهنده ای که با جاوا اسکریپت آشنا باشد می تواند به راحتی انگولار را یاد بگیرد اما فراموش نکنید که باید کمی به تایپ اسکریپت هم مسلط باشید تا بتوانید از تمام توان و قدرت Angular استفاده کنید. انگولار از معماری MCV و آپدیت داده به صورت دو طرفه در Model و View پشتیبانی میکند. در پایان قابل ذکر است که انگولار میتواند انتخاب مناسبی در ایران باشد چون دارای بازار کار و درآمد نسبتا خوبی است.
چند مثال
AngularJS به عنوان یک فایل جاوااسکریپت توزیع شده است. و می تواند به یک صفحه وب با تگ <script> اضافه شود:
|
۱
|
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
|
AngularJS کد html را گسترش می دهد
AngularJS صفحات html را با استفاده از ng-directives گسترش می دهد.
دستور Ng-app یک برنامه AngularJS را تعریف می کند.
دستورالعمل مدل ng مقدار کنترل های HTML از جمله input، select و textarea را به داده های برنامه متصل می کند.
دستور ng-bind اطلاعات برنامه را به نمای HTML متصل می کند.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
|
<!DOCTYPE html>
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=“”>
<p>Name: <input type=“text” ng-model=“name”></p>
<p ng-bind=“name”></p>
</div>
</body>
</html>
|
تشریح مثال فوق:
AngularJS وقتی صفحه وب بارگذاری می شود، به طور خودکار شروع می شود.
دستورالعمل برنامه Ng به AngularJS اعلام می کند. که عنصر <div> “مالک” یک برنامه AngularJS است.
دستورالعمل مدل ng مقدار فیلد ورودی را به نام متغیر برنامه متصل می کند.
دستور ng-bind محتویات عنصر <p> را به نام متغیر برنامه متصل می کند.
دستورالعمل AngularJS
همانطور که قبلا دیده اید، دستورات AngularJS دارای ویژگی های HTML با پیشوند ng هستند.
دستور ng-init ابتدا متغیرهای برنامه AngularJS را راه اندازی می کند.
|
۱
۲
۳
۴
۵
|
<div ng-app=“” ng-init=“firstName=’John'”>
<p>The name is <span ng-bind=“firstName”></span></p>
</div>
|
مثال ۲ : html معتبر
|
۱
۲
۳
۴
۵
|
<div data-ng-app=“” data-ng-init=“firstName=’John'”>
<p>The name is <span data-ng-bind=“firstName”></span></p>
</div>
|
عبارات AngularJS
عبارات AngularJS در داخل دو براکت نوشته می شوند: {{عبارات}}.
AngularJS خروجی را دقیقا در همان جای که عبارات نوشته شده نمایش می دهد.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
<!DOCTYPE html>
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=“”>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
|
عبارات AngularJS داده های AngularJS را به HTML همانند دستورالعمل اتصال به ng متصل می کنند.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
|
<!DOCTYPE html>
<html>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
<body>
<div ng-app=“”>
<p>Name: <input type=“text” ng-model=“name”></p>
<p>{{name}}</p>
</div>
</body>
</html>
|
برنامه های کاربردی AngularJS
ماژول های AngularJS برنامه های AngularJS را تعریف می کنند.
کنترل های AngularJS، برنامه های AngularJS را کنترل می کند.
دستورالعمل Ng-app برنامه را تعریف می کند، دستورالعمل ng-controller کنترل کننده را تعریف می کند.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
|
<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name: <input type=“text” ng-model=“firstName”><br>
Last Name: <input type=“text” ng-model=“lastName”><br>
<br>
Full Name: {{firstName + ” ” + lastName}}
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
</script>
|
ماژول های AngularJS برنامه های کاربردی را تعریف می کنند:
|
۱
|
var app = angular.module(‘myApp’, []);
|
کنترل کننده های AngularJS برنامه های کاربردی را کنترل می کند:
|
۱
۲
۳
۴
|
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
|
کلام آخر
در این بخش حدودا با کلیات ساختار فریم ورک AngularJS و چگونگی استفاده از کدهای AngularJS در صفحه html ، آشنا شدید.
آشنایی با فریم ورک Angular.js