AngularJS Routing and Views

Categories AngularJS, Uncategorized
روترها بشما کمک می کنند تا برنامه ی خود را به ویو های مختلف تقسیم کرده و آنها را به کنترلر های مختلف متصل نمایید


 در شکل بالا ما دو Route url به نام های /ShowOrders و /AddNewOrder ایجاد کردیم. هر کدام از این نقاط مربوط به ویو های خاصی سات و بوسیله ی کنترلر خود مدیریت میشوند.
۱- معرفی $routeProvider
امکانات بسیار کاربردی انگولار در سرویسی بنام $routeProvider مهیا شده است. استفاده از این سرویس استفاده تنگاتنگ کنترلر ، ویو ، تمپلیت و مدیریت URL را بهینه نموده است. استفاده از این امکان نیز برای مرورگر بهینه شده است تا با استفاده از دکمه back  or forward مدیریت نرم افزار به هم نخورد.
نحوه ی ایجاد روتینگ
در نمونه سورس پایین اشاره ای به نحوه ی نگاشت روتینگ شده است. در مثال زیر .when() and .otherwise() برای شرح روتینگ در نظر گرفته شده است.

در نمونه کد بالا ما دو url داریم /addorder and /showOrder و آنها را به ویو های templates/add-order.html and template/show-orders.html اتصال داده ایم. هر گاه  http://app/#addOrder را در مرورگر باز کنیم، انگولار بصورت خودکار این آدرس را با روت های انگولار چک کرده و add-order.html را فراخوانی می کند و سپس AddOrderController را به ویو اضافه می نماید.

۱.۱- اولین پروژه با AngularJS + Routing

همانطور که مشاهده می کنید دو دکمه وجود دارد با لینک های #AddNewOrder  و #ShowOrders که هر کدام یک تمپلیت قرار است لود کنند.

ng-view

این تگ مشخص کننده محل لود شدن تمپلیت است و در اصل نوعی placeholder‌ است.

ng-view را می توان به یکی از صورت های زیر در تمپلیت اصلی تعرف نمود

۱.۲- اضافه سازی Routing  در AngularJS

app.js :

با توجه به syntax بالا ، با دانش کمی از زبان انگلیسی می توان فهمید که روتینگ قراره چه فعالیت هایی رو انجام میده ، این فوق العادست و همینطور ساده

۱.۳- اضافه کرده HTML Template files

با توجه به فایل app.js نیاز است دو فایل در تمپلیت داشته باشیم و این فایل ها می بایست partial بوده و بعنوان مثال بصورت زیر باشند ، البته مثال زیر بعنوان محتوای فایل templates/add_order.html در نظر گرفته شده است

templates/add_order.html

 

templates/show_orders.html

 

دموی آنلاین :

 

Demo link: Plnkr.co

۲- نحوه ارسال پارامترها در Route Urls

با توجه به شکل بالا می خواهیم با کلیک بروی هر سفارش کاربر بتواند جزئیاتی از سفارش مورد نظر را مشاهده نماید. به همین خاطر نیاز است کد سفارش همراه با روتر به کنترلر ارسال شده تا ویوی مورد نظر فراخوانی شود.

به سورس زیر دقت نمایید :

:orderId همان محل قرار گیری کد است رو روتر می فهمد قرار است در اینجا چیزی نوشته شود که آنرا تحویل کنترلر دهد

حالا طبق مثال زیر کنترلر این ورودی را از روتر تحویل میگیرد :

حالا با دقت به مثال دموی آنلاین توجه نمایید :

 

Demo link: Plnkr.co

۳- نحوه فراخوانی ویوهای محلی همراه تگ اسکریپت !!

قرار نیست همیشه تمپلیت شما از فایل های مختلفی تشکیل شود و Url شما فقط از یک سری partial files استفاده نماید ، می توان به در مواقعی که urlrouting‌ شما قرار است کد کوچکی را فراخوانی نماید که شما دیگر نیاز نبینید که در یک فایل جداگانه آنرا قرار دهید می توانید آنرا در بدنه صفحه ی اصلی خود بکار ببندید و از همان صفحه فراخوانی را انجام دهید

۳.۱- ng-template directive

سورس بالا یک نمونه تمپلیت توکار است.

و حالا یک دموی آنلاین برای نمایش بهتر این امکان :

Demo link: Plnkr.co
۴- اضافه کردن داده به RouteProvider

همانطور که اشاره کردم $routePovider متدهای when and otherwise رو برای پیاده سازی url ها بکار میبره. در مواقعی نیاز هست که ما می خواهیم بجز url query داده های دیگری را به controller‌از طریق روت برسونیم. مثلا شاید شما از یک کنترلر برای چند قسمت مختلف می خواهید استفاده کنید.

به مثال زیر توجه کنید :

در مثال بالا foodata بعدا بوسیله ی controller قابل دریافت خواهد بود. و کنترلر نیز بوسیله $route.current.foodata به آن خواهد رسید.

 

 

مدیر تیم های توسعه
نظریه پرداز جوامع نوین مجازی
نویسنده مقالات در ماهنامه های تخصصی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


سه + = 4