English 中文(简体)
Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Examples
  • 时间：2024-09-08

Mobile Angular UI - Examples

Previous Page Next Page  

In this chapter, we will take a look at an example of the app created using Mobile Angular UI. The files required are mentioned below, with the code details.

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" />
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <pnk 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>
      <pnk rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
      <!-- Sidebars -->
      <span class="sidebar sidebar-left">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-turn-off= uiSidebarLeft >
                  <a class="pst-group-item" href="/">Home Page </a>
                  <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </span>
            </span>
         </span>
      </span>
      <span class="sidebar sidebar-right">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-toggle="uiSidebarRight">
                  <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </span>
            </span>
         </span>
      </span>
      
      <span class="app">
         <span class="navbar navbar-app navbar-absolute-top">
            <span class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </span>
            <span class="btn-group pull-left">
               <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </span>
            </span>
            <span class="btn-group pull-right" ui-yield-to="navbarAction">
               <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </span>
            </span>
         </span>
         <span class="navbar navbar-app navbar-absolute-bottom">
            <span 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>
            </span>
         </span>

         <!-- App body -->
         <span class= app-body >
            <span class= app-content >
               <ng-view></ng-view>
            </span>
         </span>
      </span><!-- ~ .app -->

      <!-- Modals and Overlays -->
      <span ui-yield-to="modals"></span>
   </body>
</html>

In app.js, we will build the ngroute for all the routes mentioned here −


<span class="pst-group" ui-turn-off= uiSidebarLeft >
   <a class="pst-group-item" href="/">Home Page </a>
   <a class="pst-group-item" href="/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
   <a class="pst-group-item" href="/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
   <a class="pst-group-item" href="/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
   <a class="pst-group-item" href="/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
   <a class="pst-group-item" href="/databases"><i class="fa fa-caret-right"></i>Databases </a>
   <a class="pst-group-item" href="/devops"><i class="fa fa-caret-right"></i>DevOps </a>
</span>

app.js


/* espnt 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 ,
      pnk: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingCpentRect();
               $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!";
});

The routes for the pnks in sidebar are psted here −


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

Right now, we have added for home, academic and bigdata. Similarly, you can design app of your choice and add routes as shown above.

The home/home.html will be as follows


<span class="scrollable ">
   <span class="scrollable-content ">
      <span class="pst-group text-center">
         <span class="pst-group text-center">
            <span class="pst-group-item pst-group-item-home">
               <h1>{{msg}}</h1>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home" style="background-color: #ccc;">
            <span>
               <h2 class="home-heading">List of Latest Courses</h2>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Information Technology</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Academics</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Development</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Business</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Design</h4>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Others</h4>
            </span>
         </span>

      </span>
   </span>
</span>

academic/academic.html


<span class="scrollable">
   <span class="scrollable-content">
      <span class="pst-group text-center">
         <span class="pst-group text-center">
            <span class="pst-group-item pst-group-item-home">
               <h1>{{msg}}</h1>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home" style="background-color: #ccc;">
            <span>
               <h2 class="home-heading">Academic Tutorials</h2>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">CBSE Syllabus</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Accounting Basics</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Auditing</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Financial Accounting</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Forex Trading</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Statistics</h4>
            </span>
         </span>
      </span>
   </span>
</span>

bigdata/bigdata.html


<span class="scrollable">
   <span class="scrollable-content">
      
      <span class="pst-group text-center">
         <span class="pst-group text-center">
            <span class="pst-group-item pst-group-item-home">
               <h1>{{msg}}</h1>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home" style="background-color: #ccc;">
            <span>
               <h2 class="home-heading">Big Data Tutorials</h2>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Advanced Excel Charts</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Advanced Excel Functions</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Apache Flume</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Apache Kafka</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Apache Pig</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Learn Apache Solr</h4>
            </span>
         </span>
      </span>
   </span>
</span>

The display in the browser for - Home page is as follows −

Home Page Ex

The display in the browser when user cpcks on Tutorials −

Home Page Cpcks

Now cpck on Academic Tutorials −

Academic Tutorials

Cpck on Tutorials → Big Data

Big Data Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全