📌  相关文章
📜  移动Angular UI-示例

📅  最后修改于: 2020-12-08 05:43:35             🧑  作者: Mango

在本章中，我们将看一个使用Mobile Angular UI创建的应用程序的示例。下面提到了所需的文件以及代码详细信息。

index.html


      Mobile Angular UI Demo
      
      
      
      
      
      
      
      
      
      
      
      
      
      
   
   
      
      

         

            
Tutorials

            

               

                  Home Page 
                  Academic Tutorials 
                  Big Data & Analytics 
                  Computer Programming 
                  Computer Science 
                  Databases 
                  DevOps 
               

            

         

      

      

         

            
eBooks

            

               

                  PHP 
                  Javascript 
               

            

         

      

      
      

         

            

               TutorialsPoint
            

            

               

                   Tutorials
               

            

            

               

                   eBooks
               

            

         

         

            

                About us
                Contact us

在app.js中，我们将为此处提到的所有路由构建ngroute-


   Home Page 
   Academic Tutorials 
   Big Data & Analytics 
   Computer Programming 
   Computer Science 
   Databases 
   DevOps

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

现在，我们增加了家庭，学术和大数据。同样，您可以设计自己喜欢的应用并添加路线，如上所示。

home / home.html将如下所示


   

      

         

            

               
{{msg}}

            

         


         

            

               
List of Latest Courses

            

         

         

            

               
Information Technology

            

         

         

            

               
Academics

            

         

         

            

               
Development

            

         

         

            

               
Business

            

         

         

            

               
Design

            

         


         

            

               
Others

Academic / academic.html


   

      

         

            

               
{{msg}}

            

         

         

            

               
Academic Tutorials

            

         

         

            

               
CBSE Syllabus

            

         

         

            

               
Learn Accounting Basics

            

         

         

            

               
Auditing

            

         

         

            

               
Learn Financial Accounting

            

         

         

            

               
Learn Forex Trading

            

         

         

            

               
Learn Statistics

bigdata / bigdata.html


   

      
      

         

            

               
{{msg}}

            

         

         

            

               
Big Data Tutorials

            

         

         

            

               
Advanced Excel Charts

            

         

         

            

               
Advanced Excel Functions

            

         

         

            

               
Learn Apache Flume

            

         

         

            

               
Learn Apache Kafka

            

         

         

            

               
Learn Apache Pig

            

         

         

            

               
Learn Apache Solr

浏览器中-主页的显示如下-

主页Ex

用户单击“教程”时浏览器中的显示-

主页点击

现在单击学术教程-

学术教程

单击教程→大数据

大数据