یادگیری AngularJS با مثال – ساخت یک سایت بسیار ساده

یادگیری AngularJS با مثال – ساخت یک سایت بسیار ساده

امروزه برنامه های تک صفحه ای (SPA) بطور چشمگیری بسیار محبوب هستند. Angular به ما کمک می کند که سایت هایی را ایجاد کنیم که رفتار آنها شبیه به برنامه های موبایل/تبلت است. در قسمت اول یاد گرفتیم که چطور آنگولار را به یک نوار منو (navigation) اضافه کنیم که کاربر با کلیک بر روی هر منو، نام منو انتخابی را در زیر مشاهده کند.

 

[fa type=”globe”] دمو

 

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

 

توجه داشته باشید که این مثال را در http://localhost یا یک محیط توسعه مثل Vagrant تست کنید. 

 

ساختار برنامه

قبل از این که کدهای برنامه را بررسی کنیم، ابتدا ساختار پروژه را بصورت زیر مرتب کنید:

 

 

HTML

این بخش بسیار ساده است. در این مثال نیز برای راحتی در کار، از فریم ورک Bootstrap استفاده کرده ایم. فایل index.html را باز کرده و قالب اصلی ساده را همراه با نوار منو (navigation) اضافه کنید:

 

 

هماطور که مشاهده می کنید، همانند دفعات قبل Angular و Bootstrap را به برنامه اضافه کرده ایم و همچنین فایل های style.css و app.js را به پروژه لینک کرده ایم.

 

در فایل index.html نکته که باید به آن اشاره شود ng-view است. ng-view یک دایرکتیوی است که مکمل سرویس $route است که وظیفه آن نمایش قالب ها (about.html | contact.html | …) درون قالب اصلی (index.html) است. به عبارت ساده تر وقتی کاربر بر روی منو contact کلیک می کند، URL برنامه به آدرس http://angular.app/demo/#/contact تغییر پیدا می کند و ng-view با توجه به این آدرس، قالب مورد نظر را در قالب اصلی تزریق می کند.

 

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

 

برنامه آنگولار

 

module و controller

 

در قسمت های قبل یاد گرفتیم که چطور module و controller آنگولار را درست کنیم.

ما ماژول و کنترولر خود را در فایل app.js بصورت زیر ایجاد کرده ایم:

 

 

همانطور که مشاهده می کنید ما یک module به نام myApp تعریف کرده ایم و همچنین برای هر صفحه controller مجزایی ایجاد کرده ایم. در این مثال برای اینکه مسیرهای برنامه خود را تعریف کنیم از ngRoute استفاده می کنیم. برای این کار لازم است که ابتدا ماژول angular-route را به فایل index.html اضافه کنید:

 

 

و آنگاه ماژول ngRoute را به برنامه آنگولار خود تزریق کنیم:

 

 

برای اینکه مسیرها را سازماندهی کنیم از $routeProvider استفاده می کنیم. برای تعریق یک مسیر (route) جدید از .when استفاده می کنیم. روند کار .when به این صورت است: وقتی url برنامه به آدرس '/home' تغییر داده شد، قالب home.html را همراه با controller منحصر به فرد آن مسیر بارگذاری کن:

 

 

این روند برای بقیه مسیرها نیز به یک شکل است. حال فرض کنید کاربر آدرسی غیر از آدرس هایی که ما تعریف کرده ایم وارد می کنید! چه اتفاقی می افتد؟ خوب ما با استفاده از .otherwise() می توانیم کاربر را به مسیری که می خواهیم منتقل کنیم:

 

 

قالب ها

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

 

home.html

 

about.html

 

portfolio.html

 

services.html

 

contact.html

 

CSS

در این مثال با استفاده از سی اس اس های مثال قسمت اول استفاده می کنیم، می توانید به دلخواه خود آنها را ویرایش کنید:

 

اما بخش مهمی از css فوق را تغییر دهید تا منو های برنامه نیز در این مثال در اثر انتخاب به حالت انتخال در آید: