ساخت برنامه تک صفحه ای با AngularJS

ساخت برنامه تک صفحه ای با AngularJS

 

نمایش [fa type=”eye”]  دانلود [fa type=”download”]


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

برنامه ساده ما

ما در این آموزش فقط قصد داریم یک سایت ساده با صفحات home و about و contact ایجاد کنیم. البته که با Angular می توان برنامه های پیشرفته تری را ایجاد کنید، اما در این آموزش برخی از مفاهیم مورد نیاز برای کسانی که دوست دارند برنامه های بزرگتری ایجاد کنند ارائه می شود.

 

اهداف

  • برنامه تک صفحه ای
  • بدون رفرش کردن صفحه در هنگام تغییر صفحه
  • داده های مختلف در هر صفحه

در حالی که این کارها را با Javascript و AJAX می توان انجام داد، ولی Angular این فرایند را بسیار ساده کرده است.

 

ساختار فایل ها

 

HTML

این بخش بسیار ساده است. ما از فریم ورک محبوب Bootstrap و Font Awesome استفاده خواهیم کرد، اگر اطلاعت بیشتر درباره Bootstrap می خواهید می توانید آموزش مقدماتی راه اندازی Twitter Bootstrap مشاهده کنید. فایل index.html را با ویرایشگر خود باز کرده و کد HTML زیر را به آن اظافه کنید که باعث می شود یک منوی ساده داشته باشیم.

برای لینک دادن به صفحات، از # استفاده می کنیم. ما نمی خواهیم که مرورگر فکر کند که در واقع می خواهیم در صفحات about.html و contact.html پیمایش کنیم.

 

اپلیکیشن Angular

 

ماژول و کنترل

ما قصد دارم برنامه خود را راه اندازی کنیم. بیایید ماژول و کنترل angular را نصب ایجاد کنیم. برای اطلاعات بیشتر برای هر کدام از قسمت ها، می توانید مستندات سایت Angular را مطالعه کنید.

ابتدا، باید ماژول و کنترل خود را در جاوا اسکریپت ایجاد کنیم. ما این کار را در فایل script.js انجام می دهیم:

بیایید ماژول و کنترل را به HTML خود اضافه کنیم، به طوری که Angular می داند که چگونه bootstrap شما را راه اندازی کند. برای اینکه بدانیم برنامه ما به درستی کار می کند، متغیر scope.message$ که ساخته ایم را نشان می دهیم.

داخل div اصلی ما (main)، حال پیغامی را می بینیم که ما آن را ساخته ایم. از آنجایی که ماژول و کنترلر برنامه خود را راه اندازی کرده ایم و می دانیم که Angular به درستی کار می کند، حال وقت آن است که با استفاده از این طرح صفحات دیگر برنامه را نمایش دهیم.

 

تزریق صفحات به طرح اصلی

ng-view یک دستور دهنده ی Angular است که مسیر فعلی قالب های home ، about ، contact را در طرح اصلی ما اضافه یا include می کند. به عبارت ساده، بخشی از فایلی را که می خواهیم در طرح اصلی خود index.html داشته باشیم را تزریق می کند.

ما کد ng-view را در سایت در div#main اضافه می کنیم تا Angular بداند که صفحات ما در چه محلی از سایت نمایش داده خواهد شد.

 

پیکربندی Routes و Views

از آنجایی که ما در حال ساخت برنامه ی تک صفحه ای هستیم و نمی خواهیم که صفحات رفرش بشوند، از قابلیت مسیریابی Angular استفاده می کنیم.

بیایید نگاهی به فایل Angular خود بیندازیم و کدهایی به آن اضافه کنیم. ما از routeProvider$ استفاه خواهیم کرد که مسئولیت رسیدگی به مسیریابی را به عهده دارد. به این ترتیب که، Angular تمام سحر و جادو مورد نیاز را از فایل جدید دریافت و در فایل اصلی ما تزریق می کند.

ماژول ngRoute در Angular در نسخه ی 1.1.6 به بعد وجود ندارد، پس نیاز دارید که این ماژول را به ابتدا صفحه اضافه کنید و بعد از آن استفاده کنید. این آموزش برای نسخه ی 1.2 ایجاد شده است.

حال می تواینم  routes خود را همراه با routeProvider$ تعریف کنیم. همانطور که در تنظیمات مشاهده می کنید، شما می توانید مسیری را مشخص کنید، فایل قالبی را وارد کنید و حتی یک کنترل کننده را. به این ترتیب، هر بخش از برنامه ما از صفحه و کنترل کننده ی مخصوص به خود استفاده خواهد کرد.

بطور بیشفرض، Angular یک # در آدرس بار اضافه می کند. برای خلاصی از این کار، نیاز داریم که از locationProvider$ برای فعال کردن HTML History استفاده کنیم. این کار باعث می شود که # حذف شود و یک URL تمیز داشته باشیم.

صفحه اصلی ما از فایل home.html استفاده خواهد کرد. about و contact فایل های مربوط به خود را نمایش می دهند. حال اگر برنامه خود را مشاهد کنیم، و بر روی لینک ها در نوار کلیک کنیم، خواهیم دید که محتوا همانطور که می خواستیم تغییر خواهند کرد.

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

 

 

Angular تنها وقتی کار خواهد کرد که شما محیط توسعه آن را فراهم کرده باشید. مطمئن شوید که از http://localhost یا نوعی دیگر، استفاده می کنید، وگرنه با خطا مواجه خواهید شد.