آموزش بخش ها در برنامه نویسی انگولار
4 سال پیش
آموزش بخش ها در برنامه نویسی انگولار
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش بخش ها در برنامه نویسی انگولار خواهیم پرداخت.
بخش ها ظروفی هستند که در داخل بدنه نمایش داده می شوند. در برنامه نویسی انگولار از کلاس های موجود برای بخش ها برای تغییر ساختار طرح استفاده می کند.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mobile Angular UI Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> <meta name="apple-mobile-web-app-status-bar-style" content="yes" /> <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script> <link rel="stylesheet" href="src/css/app.css" /> <script src="src/js/app.js"></script> <style> a.active { color: blue; } </style> </head> <body ng-app="myFirstApp" ng-controller="MainController" class="listening"> <!-- Sidebars --> <div class="sidebar sidebar-left "> <div class="scrollable"> <h1 class="scrollable-header app-name">Tutorials</h1> <div class="scrollable-content"> <div class="list-group" ui-turn-off='uiSidebarLeft'> <a class="list-group-item" href="/">Home Page </a> <a class="list-group-item" href="#/academic"> <i class="fa fa-caret-right"></i>Academic Tutorials </a> <a class="list-group-item" href="#/bigdata"> <i class="fa fa-caret-right"></i>Big Data & Analytics </a> <a class="list-group-item" href="#/computerProg"> <i class="fa fa-caret-right"></i>Computer Programming </a> <a class="list-group-item" href="#/computerscience"> <i class="fa fa-caret-right"></i>Computer Science </a> <a class="list-group-item" href="#/databases"> <i class="fa fa-caret-right"></i>Databases </a> <a class="list-group-item" href="#/devops"> <i class="fa fa-caret-right"></i>DevOps </a> </div> </div> </div> </div> <div class="sidebar sidebar-right"> <div class="scrollable"> <h1 class="scrollable-header app-name">eBooks</h1> <div class="scrollable-content"> <div class="list-group" ui-toggle="uiSidebarRight"> <a class="list-group-item" href="#/php"><i class= "fa fa-caret-right"></i>PHP </a> <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a> </div> </div> </div> </div> <div class="app"> <div class="navbar navbar-app navbar-absolute-top"> <div class="navbar-brand navbar-brand-center" ui-yield-to="title"> TutorialsPoint </div> <div class="btn-group pull-left"> <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"> <i class="fa fa-th-large "></i> Tutorials </div> </div> <div class="btn-group pull-right" ui-yield-to="navbarAction"> <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"> <i class="fal fa-search"></i> eBooks </div> </div> </div> <div class="navbar navbar-app navbar-absolute-bottom"> <div class="btn-group justified"> <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a> <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a> </div> </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> </html> |
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/* eslint no-alert: 0 */ 'use strict'; // // Here is how to define your module // has dependent on mobile-angular-ui // var app=angular.module('myFirstApp', ['ngRoute', 'mobile-angular-ui', 'mobile-angular-ui.gestures', ]); app.config(function($routeProvider, $locationProvider) { $routeProvider.when("/", { templateUrl : "src/home/home.html" }); $routeProvider.when("/academic", {templateUrl : "src/academic/academic.html" }); $routeProvider.when("/bigdata", {templateUrl : "src/bigdata/bigdata.html" }); $locationProvider.html5Mode({enabled:true, requireBase:false}); }); app.directive('touchtest', ['$touch', function($touch) { return { restrict: 'C', link: function($scope, elem) { $scope.touch=null; $touch.bind(elem, { start: function(touch) { $scope.containerRect=elem[0].getBoundingClientRect(); $scope.touch=touch; $scope.$apply(); }, cancel: function(touch) { $scope.touch=touch; $scope.$apply(); }, move: function(touch) { $scope.touch=touch; $scope.$apply(); }, end: function(touch) { $scope.touch=touch; $scope.$apply(); } }); } }; }]); app.controller('MainController', function($rootScope, $scope, $routeParams) { $scope.msg="Welcome to TutorialsPoint!"; }); |
home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="scrollable "> <div class="scrollable-content "> <div class="list-group text-center"> <div class="list-group text-center"> <div class="list-group-item list-group-item-home"> <h1>{{msg}}</h1> </div> </div> <div class="list-group-item list-group-item-home" style="background-color: #ccc;"> <div> <h2 class="home-heading">List of Latest Courses</h2> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Information Technology</h4> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Academics</h4> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Development</h4> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Business</h4> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Design</h4> </div> </div> <div class="list-group-item list-group-item-home list-tuts"> <div> <h4 class="home-heading">Others</h4> </div> </div> </div> </div> </div> |
ظرف به همراه کلاس app. نوار ورودی بالا و پایین و محتوای اصلی را که بر روی صفحه نمایش داده می شوند ، نگه می دارد. کلاس app. هیچگونه لایه پشتی و زمینه ای ندارد.
کلاس section. دارای css برای افزودن padding و پس زمینه است.
در اینجا یک طرح بدون بخش وجود دارد.
پس از افزودن کلاس. بخش ، padding .section. اضافه شده به طرح را مشاهده خواهید کرد –
|
1 |
<div class = "app section"> </div> |
برخی از تغییرات بیشتر در بخش ها برای طرح وجود دارد.
|
1 2 3 |
.section-wide : makes horizontal padding as 0 .section-condensed : makes vertical padding as 0 .section-break : this class will add margin-bottom as well shadow to show the break in sections on the screen. |
همچنین می توانید با کلاسهای اضافی مانند .section-default, .section-primary, .section-success, .section-info, .section-warning or .section-danger برای تغییر طرح بازی کنید.
لیست جلسات قبل آموزش برنامه نویسی انگولار
- آموزش برنامه نویسی انگولار
- بررسی اجمالی برنامه نویسی انگولار
- آموزش نصب انگولار
- آموزش راه اندازی پروژه در برنامه نویسی انگولار
- آموزش اولین برنامه انگولار
- آموزش طرح بندی در برنامه نویسی انگولار
- آموزش مولفه ها در برنامه نویسی انگولار
- آموزش منوی کشویی در برنامه نویسی انگولار
- آموزش منوی آکاردئون در برنامه نویسی انگولار
- آموزش تب ها در برنامه نویسی انگولار
- آموزش کشیدن و رها کردن در برنامه نویسی انگولار
- آموزش مناطق قابل پیمایش در برنامه نویسی انگولار
- آموزش فرم ها در برنامه نویسی انگولار
- آموزش سوایپ کردن در برنامه نویسی انگولار
- آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار
نویسنده مطلب
saber
.svg)
دیدگاه شما