مثال هایی از برنامه نویسی انگولار

erfan molaei
3 سال پیش

مثال هایی از برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به مثال هایی از برنامه نویسی انگولار خواهیم پرداخت.

در این درس، ما به یک نمونه از برنامه ایجاد شده با استفاده از رابط کاربری موبایل Angular نگاهی خواهیم انداخت. پرونده های مورد نیاز با جزئیات کد در زیر ذکر شده است.

 

index.html

<!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>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
      <!-- 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 ، ما برای همه مسیرهایی که در اینجا ذکر شده ، نروژ ایجاد خواهیم کرد –

<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>

 

app.js

/* 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!";
});

 

مسیرهای پیوندها در نوار کناری در اینجا لیست شده است –

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});
});

 

در حال حاضر  ما برای خانه، دانشگاهی و bigdata اضافه کرده ایم. به همین ترتیب، شما می توانید برنامه مورد نظر خود را طراحی کرده و مسیرهایی را که در بالا نشان داده شده اضافه کنید.

home / home.html به شرح زیر خواهد بود

<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>

 

academic/academic.html

<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">Academic Tutorials</h2>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">CBSE Syllabus</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Accounting Basics</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Auditing</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Financial Accounting</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Forex Trading</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Statistics</h4>
            </div>
         </div>
      </div>
   </div>
</div>

 

bigdata/bigdata.html

<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">Big Data Tutorials</h2>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Advanced Excel Charts</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Advanced Excel Functions</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Apache Flume</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Apache Kafka</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Apache Pig</h4>
            </div>
         </div>
         <div class="list-group-item list-group-item-home list-tuts">
            <div>
               <h4 class="home-heading">Learn Apache Solr</h4>
            </div>
         </div>
      </div>
   </div>
</div>

 

نمایش در مرورگر برای – صفحه اصلی به شرح زیر است –

Home Page Ex
هنگام کلیک کاربر روی آموزش ، صفحه نمایش در مرورگر –

Home Page Clicks
اکنون بر روی آموزش های دانشگاهی کلیک کنید –

Academic Tutorials
روی  T Big Data کلیک کنید

Big Data

 

منبع.

 

لیست جلسات قبل آموزش برنامه نویسی انگولار 

  1. آموزش برنامه نویسی انگولار
  2. بررسی اجمالی برنامه نویسی انگولار
  3. آموزش نصب انگولار 
  4. آموزش راه اندازی پروژه در برنامه نویسی انگولار
  5. آموزش اولین برنامه انگولار
  6. آموزش طرح بندی در برنامه نویسی انگولار
  7. آموزش مولفه ها در برنامه نویسی انگولار
  8. آموزش منوی کشویی در برنامه نویسی انگولار
  9. آموزش منوی آکاردئون در برنامه نویسی انگولار
  10. آموزش تب ها در برنامه نویسی انگولار
  11. آموزش کشیدن و رها کردن در برنامه نویسی انگولار
  12. آموزش مناطق قابل پیمایش در برنامه نویسی انگولار
  13. آموزش فرم ها در برنامه نویسی انگولار
  14. آموزش سوایپ کردن در برنامه نویسی انگولار
  15. آموزش سوییچ تغییر وضعیت در برنامه نویسی انگولار
  16. آموزش بخش ها در برنامه نویسی انگولار
  17. آموزش جزئیات اصلی در برنامه نویسی انگولار
  18. آموزش رویدادها لمسی در برنامه نویسی انگولار
  19. آموزش PhoneGap و Cordova در برنامه نویسی انگولار
  20. آموزش ایجاد فایل APK در برنامه نویسی انگولار
  21.  آموزش توسعه برنامه در برنامه نویسی انگولار
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه