آموزش طرح بندی در برنامه نویسی انگولار
آموزش طرح بندی در برنامه نویسی انگولار
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش طرح بندی در برنامه نویسی انگولار خواهیم پرداخت.
در این درس، ما صفحه اصلی طرح بندی موجود در رابط کاربری Angular Mobile را درک خواهیم کرد.
ساختار طرح اصلی به شرح زیر است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body ng-app="myFirstApp" ng-controller="MainController"> <!-- Sidebars --> <div class="sidebar sidebar-left"><!-- ... --></div> <div class="sidebar sidebar-right"><!-- ... --></div> <div class="app"> <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div> <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div> <!-- App body --> <div class='app-body'> <div class='app-content'> <ng-view></ng-view> </div> </div> </div><!-- ~ .app --> <!-- Modals and Overlays --> <div ui-yield-to="modals"></div> </body> |
صفحه تلفن همراه یا دسک تاپ شما به بخشهایی تقسیم می شود.
sidebar
قسمت بدنه با ظروف div نوار کناری شروع می شود ، یکی برای سمت چپ و دیگری برای سمت راست –
|
1 2 3 |
<!-- Sidebars --> <div class="sidebar sidebar-left"><!-- ... --></div> <div class="sidebar sidebar-right"><!-- ... --></div> |
یک نوار کناری به خوبی به استفاده از فضا به ویژه در تلفن همراه کمک می کند و این باعث می شود رابط کاربر بسیار تعاملی و شسته و رفته باشد. با نوار کناری ، پنجره ها از سمت چپ و سمت راست باز می شوند.
Navbars
بخش بعدی نوارهای نوار است. در زیر ظروف div برای نوارها نشان داده شده است –
|
1 2 |
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div> <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div> |
آنها در بالا و پایین نشان داده شده اند.
بخش بدنه برنامه
این بخش اصلی ترین مکان نمایش محتویات شما برای تعامل یا خواندن کاربر است.
|
1 2 3 4 5 |
<div class='app-body'> <div class='app-content'> <ng-view></ng-view> </div> </div> |
از دستورالعمل <ng-view> </ng-view> استفاده می کند که با توجه به تعامل کاربر در UI با محتوای واقعی جایگزین می شود. AngularJS NgRoute در اینجا برای جایگزینی نماها استفاده شده است.
Modals و Overlays
آخرین بخش، بخش Modals و Overlays است. ظرف div برای نشان دادن حالت ها و پوشش ها به شرح زیر است –
|
1 2 |
<!-- Modals and Overlays --> <div ui-yield-to="modals"></div> |
لیست جلسات قبل آموزش برنامه نویسی انگولار
.svg)
دیدگاه شما