Interface utilisateur mobile angulaire - Guide rapide
Mobile Angular UI est un framework open-source pour le développement d'applications mobiles hybrides. L'interface utilisateur mobile angulaire utilise Twitter Bootstrap et AngularJS qui permet de créer des applications mobiles et de bureau hybrides HTML5 attrayantes.
Caractéristiques de l'interface utilisateur angulaire mobile
Mobile Angular UI a quelques composants sympas qui sont listés ci-dessous -
Navbars- Navbars utilise la partie supérieure et inférieure de l'écran de l'appareil. Nous pouvons utiliser la barre de navigation supérieure pour afficher les éléments de menu ou la section d'en-tête. La barre de navigation inférieure peut être utilisée pour afficher la section de pied de page.
Scrollable Areas- Cette fonctionnalité rend l'application plus conviviale. Ajout de classes css. scrollable-header / .scrollable-footer , ajoutera un en-tête / pied de page fixe à la zone de défilement souhaitée. Vous n'avez pas à vous soucier de la hauteur et du positionnement, le css s'occupe de tout.
Accordion- Les accordéons sont principalement utilisés lorsque le contenu est censé être dans une vue de type section et qu'une section est visible à la fois. Vous pouvez masquer et ouvrir la section suivante pour en afficher le contenu.
Dropdowns - Pour travailler avec des listes déroulantes, l'ajout du menu déroulant css au conteneur sert le but.
Modals and Overlays- Modals et Overlays afficheront une fenêtre de type pop-up sur votre écran. Les superpositions diffèrent du mode modal uniquement par la manière dont le conteneur est affiché.
Sections- Les sections sont des conteneurs qui sont affichés à l'intérieur du corps. Vous pouvez modifier la disposition de votre affichage dans l'appareil avec des classes disponibles avec des sections. Vous pouvez utiliser les classes comme.section-default, .section-primary, .section-success, .section-info, .section-warning or .section-danger pour changer la mise en page.
Sidebars- Les barres latérales occupent les côtés gauche et droit de l'écran. Ils sont toujours masqués et activés lorsque l'élément connecté au côté gauche ou au côté droit est cliqué. C'est la meilleure façon d'utiliser l'espace sur l'écran.
Toggle Switch - L'interface utilisateur mobile angulaire propose des éléments de commutation à ui-switchdirectif. La directive ui-switch effectue une bascule lorsqu'elle est appliquée à une valeur booléenne ngModel.
Tabs- Les onglets sont des composants utiles disponibles dans l'interface utilisateur mobile angulaire. Les onglets sont disponibles dans le même wrapper et affichent votre contenu dans un volet séparé, tout comme la façon dont les onglets sont ouverts dans le navigateur. Un seul onglet est affiché à la fois pour l'utilisateur.
Avantages de l'interface utilisateur angulaire mobile
Voici les avantages de l'interface utilisateur angulaire mobile -
Mobile Angular UI fournit des composants mobiles d'interface utilisateur sympas comme la barre de navigation, les barres latérales, les modaux et les superpositions, les commutateurs, etc.
Facile à créer des applications hybrides car il utilise AngularJS et Twitter Bootstrap qui est très facile à apprendre et à démarrer. En outre, c'est un framework open source gratuit.
Il est possible d'utiliser des composants ioniques avec des composants Mobile Angular UI.
Inconvénients de l'interface utilisateur angulaire mobile
Voici les inconvénients de l'interface utilisateur mobile angulaire -
Étant un framework JavaScript uniquement, les applications écrites en AngularJS ne sont pas sûres. L'authentification et l'autorisation côté serveur sont indispensables pour garantir la sécurité d'une application.
À mesure que les directives AngularJS sont ajoutées au balisage HTML, le débogage devient un peu difficile lorsque l'erreur survient.
Dans ce chapitre, nous installerons Mobile Angular UI, afin de pouvoir l'utiliser dans notre projet.
Il existe deux façons d'installer Mobile Angular UI -
- Télécharger depuis Github
- Utilisation de Npm
Télécharger depuis Github
Accédez au lien github suivant -https://github.com/mcasimir/mobile-angular-ui/releaseset vous pouvez télécharger la dernière interface utilisateur mobile angulaire. Le lien github pour l'interface utilisateur angulaire mobile est le suivant
Cliquez sur le bouton Cloner ou télécharger (surligné en bleu) et il vous montre le lien GitHub (surligné en orange) qui peut être cloné et un ZIP de téléchargement (surligné en noir) dans lequel vous pouvez télécharger le code complet de Angular Mobile UI.
Pour cloner le lien GitHub, vous devez installer git. Assurez-vous que git est installé sur votre système si vous n'avez pas à suivre ce lien pour installer GIT .
Le premier clonera le lien github - https://github.com/mcasimir/mobile-angular-ui.git.
Pour obtenir les fichiers de l'interface utilisateur angulaire mobile - cd mobile-angular-ui / src / js.
Les fichiers dont vous avez besoin sont présents comme indiqué ci-dessus.
Utilisation de Npm
L'utilisation de npm est le moyen le plus simple d'installer. Assurez-vous que nodejs et npm sont installés. Sinon, suivez ce lien pour installer nodejs sur votre système.
Ouvrez votre invite de commande et créez un répertoire appelé uiformobile / . Allez dans uiformobile / en utilisant la commande cd.
Exécutez maintenant la commande suivante -
npm initLa commande npm init initialisera le projet -
Il créera package.json comme indiqué ci-dessous -
{
"name": "uiformobile",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Exécutez maintenant la commande suivante pour installer l'interface utilisateur angulaire mobile.
npm install --save mobile-angular-ui
Vous avez terminé l'installation de l'interface utilisateur angulaire mobile, voyons maintenant comment l'utiliser pour créer une application mobile.
Ce chapitre travaillera sur la configuration du projet. Nous allons utiliser cette configuration pour travailler avec des exemples dans le reste des chapitres.
La configuration du projet se fera à l'aide de npm, car il est facile d'installer tous les packages requis.
Ouvrez votre invite de commande et créez un répertoire appelé uiformobile / et entrez le répertoire à l'aide de la commande cd.
Exécutez maintenant la commande suivante -
npm initLa commande npm init initialisera le projet -
Il créera package.json comme indiqué ci-dessous -
{
"name": "uiformobile",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}Exécutez maintenant la commande suivante pour installer l'interface utilisateur angulaire mobile.
npm install --save mobile-angular-ui
Pour travailler avec Mobile Angular UI, nous avons besoin d'AngularJS. Laissez-nous installer cela en utilisant la commande suivante -
npm install --save-dev angular
Nous avons également besoin de la route angulaire pour travailler avec le routage. Pour l'installer, la commande est -
npm install --save-dev angular-route
Nous aurions besoin d'un serveur qui exécutera notre application dans le navigateur. Nous utiliserons express.
La commande pour installer express est -
npm install --save-dev expressCréez un fichier server.js dans le dossier racine. Ce fichier aura la commande express pour démarrer le serveur.
Voici les détails de server.js -
const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))Pour démarrer le serveur, utilisez la commande suivante -
node server.js.Le serveur démarrera au port 3000. Vous pouvez utiliser http://localhost:3000/ pour voir l'interface utilisateur dans votre navigateur.
La structure finale du dossier est comme indiqué ci-dessous -
Le dossier node_modules / contient tous les packages installés pour mobile_angular_ui, angularjs et angular-route.
le src/Le dossier contiendra les fichiers HTML et js nécessaires au développement de l'interface utilisateur. L'index.html est le point de départ qui sera vu lorsque vous appuyez surhttp://localhost:3000/.
Les packages requis sont maintenant installés. Parlons maintenant des fichiers css et js importants dont nous avons besoin. Bien que le cadre soit destiné aux applications mobiles, il peut également être utilisé pour les applications de bureau.
Voici les fichiers css importants qui doivent obligatoirement être inclus dans vos fichiers .html.
| Sr.Non | Description du fichier |
|---|---|
| 1 | mobile-angular-ui-base.css Ce fichier css est destiné aux appareils mobiles et aux tablettes. |
| 2 | mobile-angular-ui-desktop.css Fichier css réactif destiné à être utilisé sur les ordinateurs de bureau et les appareils mobiles. |
| 3 | mobile-angular-ui-hover.css Cela a des règles css pour le survol. |
| 4 | angular.min.js Fichier AngularJS dont nous avons besoin pour démarrer le projet. |
| 5 | mobile-angular-ui.min.js Il s'agit du fichier js de l'interface utilisateur angulaire mobile que nous devons utiliser dans le module de dépendance du module AngularJS. C'est le module principal. |
| 6 | angular-route.min.js Il s'agit d'un fichier de route AngularJS utilisé pour le routage. |
Tous les fichiers ci-dessus sont présents à l'intérieur node_modules/. Nous avons terminé la configuration du projet, nous allons maintenant utiliser ce projet dans le chapitre suivant pour développer notre première application.
Dans ce chapitre, nous allons créer notre première application qui fonctionnera aussi bien sur mobile que sur ordinateur.
La configuration du projet que nous avons créée dans le chapitre précédent a la structure suivante -
uiformobile/
node_modules/
src/
package.json
index.htmlSuivez les étapes pour créer une interface utilisateur simple à l'aide de l'interface utilisateur mobile angulaire.
Étape 1
Ajoutez les fichiers css suivants dans la section head html comme indiqué ci-dessous -
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<!-- Mandatory CSS -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />Ensuite, ajoutez les fichiers js -
<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>Le fichier index.html ressemblera à ceci -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
<!-- Mandatory CSS -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
<!-- Required for desktop -->
<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>
</head>
<body>
</body>
</html>Étape 2
Nous verrons la disposition de base de l'interface utilisateur angulaire mobile comme ci-dessous -
<body ng-app="myFirstApp">
<!-- 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>Étape 3
Créer un js/ folder in src/ et ajouter app.js à lui.
Définissez le module et ajoutez l'interface utilisateur angulaire mobile et la route angulaire en tant que dépendance, comme indiqué ci-dessous -
<script type="text/javascript">
'ngRoute',
angular.module('myFirstApp', [
'mobile-angular-ui'
]);
</script>Ajoutez ng-app = "myFirstApp" à la balise <body> -
<body ng-app="myFirstApp">Le module mobile-angular-ui a la liste suivante de modules -
angular.module('mobile-angular-ui', [
'mobile-angular-ui.core.activeLinks', /* adds .active class to current links */
'mobile-angular-ui.core.fastclick', /* polyfills overflow: auto */
'mobile-angular-ui.core.sharedState', /* SharedState service and directives */
'mobile-angular-ui.core.outerClick', /* outerClick directives */
'mobile-angular-ui.components.modals', /* modals and overlays */
'mobile-angular-ui.components.switch', /* switch form input */
'mobile-angular-ui.components.sidebars', /* sidebars */
'mobile-angular-ui.components.scrollable', /* uiScrollable directives */
'mobile-angular-ui.components.capture', /* uiYieldTo and uiContentFor directives */
'mobile-angular-ui.components.navbars' /* navbars */
]);Le mobile-angular-ui.min.js contient tous les modules de base et composants ci-dessus. Vous pouvez également charger les composants requis selon vos besoins au lieu de charger l'intégralité de mobile-angular-ui.min.js.
Étape 4
Ajoutez un contrôleur à votre balise corporelle comme indiqué ci-dessous -
<body ng-app="myFirstApp" ng-controller="MainController">Étape 5
Dans la mise en page de base, nous avons ajouté <ng-view></ng-view>, cela chargera les vues pour nous.
Définissons les routes dans app.js en utilisant ngRoute. Les fichiers nécessaires au routage sont déjà ajoutés dans la section head.
Créez un dossier home / dans src /. Ajoutez-y home.html avec les détails suivants -
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Désormais, lorsque nous démarrons l'application, par défaut, nous voulons que home.html soit affiché dans <ng-view> </ng-view>.
Le routage est configuré dans app.config () comme indiqué ci-dessous -
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});Étape 6
Nous avons ajouté {{msg}} dans home.html comme indiqué ci-dessous -
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Définissons la même chose dans le contrôleur comme indiqué ci-dessous -
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
});Étape 7
Maintenant, exécutez la commande pour démarrer l'application en utilisant la commande ci-dessous -
node server.js
Étape 8
Chargez votre application sur http://localhost:3000 dans le navigateur -
Vous verrez l'écran suivant en mode mobile -
Vous verrez l'écran suivant en mode Bureau -
Laissez-nous comprendre les détails de chaque composant dans Mobile Angular UI dans les chapitres suivants.
Voici le code final de l'affichage ci-dessus. La structure des dossiers jusqu'à présent est la suivante -
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="src/js/app.js"></script>
</head>
<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>
</html>js/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'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
});home/home.html
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Dans ce chapitre, nous allons comprendre l'affichage de la disposition de base disponible dans Mobile Angular UI.
La structure de la mise en page de base est la suivante
<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>L'écran de votre mobile ou de votre bureau est divisé en sections.
Barre latérale
La section du corps commence par les conteneurs div de la barre latérale, un pour le côté gauche et le suivant pour le côté droit -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Une barre latérale aide bien à utiliser efficacement l'espace, spécialement sur mobile, ce qui rend l'interface utilisateur très interactive et soignée. Dans la barre latérale, les fenêtres s'ouvrent du côté gauche et du côté droit.
Navbars
La section suivante concerne les barres de navigation. Voici les conteneurs div pour les barres de navigation à afficher -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Ils sont affichés en haut et en bas.
Section du corps de l'application
Cette section est le principal endroit où votre contenu est affiché pour que l'utilisateur puisse interagir ou lire.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Il utilise <ng-view></ng-view>directive qui sera remplacée par le contenu réel en fonction de l'interaction de l'utilisateur sur l'interface utilisateur. AngularJS NgRoute est utilisé ici pour remplacer les vues.
Modaux et superpositions
La dernière section est la section des modaux et des superpositions. Le conteneur div pour afficher les modaux et les superpositions est le suivant:
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>Dans ce chapitre, nous allons comprendre les composants importants de l'interface utilisateur angulaire mobile. Ils sont les suivants -
- Navbars
- Sidebars
- Modals
- Overlays
Navbars
Les barres de navigation utilisent la partie supérieure et inférieure de l'écran de l'appareil. Nous pouvons utiliser la barre de navigation supérieure pour afficher les éléments de menu ou la section d'en-tête. La barre de navigation inférieure peut être utilisée pour afficher la section de pied de page.
Un simple affichage de la barre de navigation à l'écran est le suivant -
Navbar peut être affiché de deux manières: approche fixe et approche de débordement.
Classes CSS importantes
Dans Mobile Angular UI pour afficher la barre de navigation, vous devez utiliser les classes css - navbar, .navbar-app .
Classes pour l'approche Top / Bottom Overflow
Pour la barre de navigation supérieure, la classe css - .navbar-absolute-top .
Pour la barre de navigation inférieure, la classe css - .navbar-absolute-bottom .
Classes pour l'approche fixe Top / Bottom
Pour la barre de navigation supérieure, la classe css - .navbar-fixed-top .
Pour la barre de navigation inférieure, la classe css - .navbar-fixed-bottom .
Laissez-nous travailler sur la barre de navigation Overflow sur l'interface utilisateur.
Voici le code HTML pour le même -
Navbar-Top
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<div class="btn">
<i class="fa fa-th-large "></i> Library
</div>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
TutorialsPoint
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div class="btn">
<i class="fal fa-search"></i> eBooks
</div>
</div>
</div>Navbar-Bottom
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
<a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>Voici à quoi ressemble l'affichage -
Barres latérales
Les barres latérales occupent les côtés gauche et droit de l'écran. Ils sont toujours masqués et activés lorsque l'élément connecté au côté gauche ou au côté droit est cliqué. C'est la meilleure façon d'utiliser l'espace sur l'écran.
Jusqu'à présent, nous avons vu le fonctionnement des navbars. Utilisons maintenant l'élément de barre de navigation sur le côté gauche et le côté droit pour ouvrir les barres latérales.
Vous pouvez placer des barres latérales sur le côté gauche ou droit.
Classes CSS importantes
Les classes css pour la barre latérale gauche - barre latérale gauche .
Les classes css pour la barre latérale droite - barre latérale droite .
Le conteneur div pour la barre latérale est le suivant -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Interaction avec les barres latérales
Pour ouvrir et fermer les barres latérales ajoutées sur le côté gauche et sur le côté droit, vous devez ajouter ce qui suit à la balise html qui ouvrira les barres latérales.
Par exemple, pour ouvrir la barre latérale gauche en cliquant sur un lien, vous pouvez ajouter ce qui suit -
La barre latérale utilise sharedstate uiSidebarLeft et uiSidebarRight pour basculer les éléments de la barre latérale.
Nous allons utiliser la barre de navigation supérieure que nous avons ajoutée plus tôt. Ajoutez ui-toggle = "uiSidebarLeft" et ui-toggle = "uiSidebarRight" ainsi que les classes sidebar-toggle et sidebar-right-toggle.
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div><div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>Ajoutons maintenant un conteneur div pour la barre latérale gauche et la barre latérale droite.
Barre latérale de gauche
<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>Vous pouvez utiliser ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'dans votre modèle de barre latérale pour fermer la barre latérale lorsque vous cliquez n'importe où dans la barre latérale. La barre latérale sera fermée par défaut lorsque vous cliquez n'importe où en dehors du modèle de barre latérale.
Dans la barre latérale gauche lorsque l'utilisateur clique sur les liens, la barre latérale sera fermée comme nous l'avons ajouté ui-turn-off='uiSidebarLeft' dans le modèle de barre latérale gauche.
Barre latérale droite
<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>L'affichage de la barre latérale dans le navigateur est le suivant -
Cliquez sur Tutoriels pour obtenir le menu de la barre latérale gauche comme indiqué ci-dessous -
Cliquez sur Ebooks pour obtenir le menu de droite comme indiqué ci-dessous -
Modaux et superpositions
Modals et Overlays afficheront une fenêtre de type pop-up sur votre écran. Les superpositions diffèrent du mode modal uniquement par la manière dont le conteneur est affiché.
Vous devez utiliser ngIf/uiIf ou ngHide/uiHide avec uiState pour activer / désactiver la superposition ou le modal.
Le css pour modal sera .modal, et pour la superposition, ce sera .modal-overlay.
Pour afficher le modal et la superposition, ajoutez le conteneur div suivant dans votre index.html.
<div ui-yield-to="modals"></div>Attribuons un modal au pied de page de la barre de navigation que nous avons fait précédemment.
Ici, ABOUT NOUS agira comme un modal et CONTACTEZ-NOUS agira comme une superposition.
Ajoutez les modifications suivantes aux liens de À PROPOS DE NOUS et CONTACTEZ-NOUS -
<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_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
</div>
</div>Si nous cliquons sur ce lien, le modal et la superposition s'ouvriront.
Le contenu pour le modal et la superposition est ajouté inside src/home/home.html fichier.
Le contenu principal pour le modal et la superposition doit être enveloppé dans le conteneur div suivant -
<div ui-content-for="modals">
<div class="modal"><!-- ... --></div>
</div>Ajoutons du contenu à la vue modale et superposée. Le nom que nous avons utilisé sur les liens à savoir,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", les mêmes sont utilisés à l'intérieur pour le aboutus contenu modal et contactus contenu de superposition.
<div ui-content-for="modals">
<div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="aboutus_modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
<p>Testing Modal</p>
</div>
<div class="modal-footer">
<button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
<button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="contactus_overlay">×</button>
<h4 class="modal-title">Overlay</h4>
</div>
<div class="modal-body">
<p>Testing Overlay</p>
</div>
<div class="modal-footer">
<button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
<button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>L'affichage pour le modal et la superposition est le suivant -
En cliquant sur À PROPOS DE NOUS, il affichera modal comme indiqué ci-dessous -
En cliquant sur CONTACTEZ-NOUS, il affichera la superposition comme indiqué ci-dessous -
Cliquez sur le bouton Fermer pour fermer la fenêtre modale.
Pour travailler avec des listes déroulantes dans l'interface utilisateur angulaire mobile, vous devez utiliser la classe .dropdown-menu .
Voici un exemple qui affiche la liste déroulante.
Nous ajouterons les changements dans src/home/home.html.
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
<div class="list-group-item list-group-item-home">
<div class="btn-group">
<a ui-turn-on='testDropdown' class='btn'>
<i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials
</a>
<ul
class="dropdown-menu"
ui-outer-click="Ui.turnOff('testDropdown')"
ui-outer-click-if="Ui.active('testDropdown')"
role="menu"
ui-show="testDropdown"
ui-state="testDropdown"
ui-turn-off="testDropdown">
<li><a>PHP</a></li>
<li><a>JAVA</a></li>
<li><a>MYSQL</a></li>
<li class="divider"></li>
<li><a>PYTHON</a></li>
</ul>
</div>
</div>
</div>Nous avons une liste de tutoriels affichés dans la liste déroulante. La sortie à l'écran est la suivante -
Les accordéons sont principalement utilisés lorsque le contenu est censé être dans une vue de type section et qu'une section est visible à la fois. Vous pouvez masquer et ouvrir la section suivante pour en afficher le contenu.
Travaillons sur un exemple pour voir le fonctionnement d'un accordéon dans Mobile Angular UI.
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>src / js / 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'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.sections="Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!Testing of Accordion using
Mobile Angular UI!";
});Le modèle d'accordéon est ajouté dans src / home / home.html.
<div class="scrollable">
<div class="scrollable-content">
<div class="section">
<div class="panel-group"
ui-shared-state="testAccordion"
ui-default='2'>
<div class="panel panel-default" ng-repeat="i in [1,2,3,4,5]">
<div class="panel-heading" ui-set="{'testAccordion': i}">
<h4 class="panel-title">
Accordion Group Item #{{i}}
</h4>
</div>
<div ui-if="testAccordion == {{i}}">
<div class="panel-body">
{{sections}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>Voici l'affichage dans le navigateur -
Les onglets sont des composants utiles disponibles dans l'interface utilisateur mobile angulaire. Les onglets sont disponibles dans le même wrapper et affichent votre contenu dans un volet séparé, tout comme la façon dont les onglets sont ouverts dans le navigateur. Un seul onglet est affiché à la fois pour l'utilisateur.
Voici un exemple fonctionnel du composant Tabs.
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>src / js / 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'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it is integrated with HTML. It is open and
cross-platform.";
$scope.angularjs="AngularJS is a very powerful
JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library
developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
});src / home / home.html
<div class="scrollable">
<div class="scrollable-content">
<div class="section">
<ui-shared-state id="activeTab" default="1"></ui-shared-state>
<ul class="nav nav-tabs">
<li ui-class="{'active': activeTab == 1}">
<a ui-set="{'activeTab': 1}">Javascript</a>
</li>
<li ui-class="{'active': activeTab == 2}">
<a ui-set="{'activeTab': 2}">AngularJS</a>
</li>
<li ui-class="{'active': activeTab == 3}">
<a ui-set="{'activeTab': 3}">ReactJS</a>
</li>
</ul>
<div ui-if="activeTab == 1">
<h3 class="page-header">Javascript</h3>
<p>{{js}}</p>
</div>
<div ui-if="activeTab == 2">
<h3 class="page-header">AngularJS</h3>
<p>{{angularjs}}</p>
</div>
<div ui-if="activeTab == 3">
<h3 class="page-header">ReactJS</h3>
<p>{{reactjs}}</p>
</div>
<div class="btn-group justified nav-tabs">
<a ui-set="{'activeTab': 1}"
ui-class="{'active': activeTab == 1}" class="btn btn-default">Javascript</a>
<a ui-set="{'activeTab': 2}"
ui-class="{'active': activeTab == 2}" class="btn btn-default">AngularJS</a>
<a ui-set="{'activeTab': 3}"
ui-class="{'active': activeTab == 3}" class="btn btn-default">ReactJS</a>
</div>
</div>
</div>
</div>Voici l'affichage dans le navigateur -
La fonction glisser-déposer vous permet de prendre le contrôle d'un élément html en le saisissant et en le faisant glisser et en le plaçant à un emplacement différent.
Pour utiliser les fonctionnalités de glisser-déposer dans Mobile Angular UI, vous devez ajouter le module gestes.
Ajoutez d'abord le fichier JavaScript dans index.html comme indiqué ci-dessous -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>Plus tard, ajoutez le module gestes en tant que dépendance dans app.js comme indiqué ci-dessous -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);Nous devons créer une directive personnalisée pour faire glisser l'élément, en utilisant le module $ drag.
La syntaxe pour utiliser le module $ drag est la suivante -
$drag.bind(element, dragOptions, touchOptions);Paramètres
element - L'élément html que vous souhaitez faire glisser.
dragOptions - C'est un objet avec les détails suivants -
var dragOptions= {
transform: $drag.TRANSLATE_BOTH,
start: function(dragInfo, event){},
end: function(dragInfo, event){},
move: function(dragInfo, event){},
cancel: function(dragInfo, event){}
};Pour la transformation , vous pouvez utiliser les options suivantes -
$ drag.NULL_TRANSFORM - aucun mouvement de transformation pour l'élément.
$ drag.TRANSLATE_BOTH - L'élément se déplacera sur les axes x et y.
$ drag.TRANSLATE_HORIZONTAL - L'élément se déplacera sur l'axe x.
$ drag.TRANSLATE_UP - L'élément se déplacera sur l'axe y négatif.
$ drag.TRANSLATE_DOWN - L'élément se déplacera sur un axe y positif.
$ drag.TRANSLATE_LEFT - L'élément se déplacera sur l'axe x négatif.
$ drag.TRANSLATE_RIGHT - L'élément se déplacera sur l'axe des x positif.
$ drag.TRANSLATE_VERTICAL - L'élément se déplacera sur l'axe y.
$ drag.TRANSLATE_INSIDE - Il utilise une fonction comme indiqué ci-dessous -
{
transform: $drag.TRANSLATE_INSIDE(myElement)
}Le début, la fin, le déplacement, l'annulation est une fonction avec des informations de glissement et des détails d'événement en tant que paramètres.
draginfo- C'est une version étendue du module $ touch. Il a les détails suivants -
originalTransform- L' objet $ transform relatif à la transformation CSS avant la liaison de $ drag.
originalRect - Le Rect de Client Bounding pour l'élément lié avant toute action de glissement.
startRect - Le Rect de client de délimitation pour l'élément lié enregistré lors de l'événement de démarrage.
startTransform- L' événement $ transform at start.
rect - Le rect client de délimitation actuel pour l'élément lié.
transform- La transformation $ actuelle .
reset - Une fonction de restauration de l'élément à originalTransform.
undo - Un élément de restauration de fonction pour startTransform.
touchOptions - est un objet option à passer au service $ touch sous-jacent.
Créez une directive en utilisant le module $ drag dans src / js / app.js comme indiqué ci-dessous -
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);Voyons un exemple de travail de glisser un élément -
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>
<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>
</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>src / js / 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"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it
is integrated with HTML. It is open and cross-platform.";
$scope.angularjs="AngularJS is a very powerful
JavaScript Framework. It is used in Single Page
Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more
responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library
developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS
allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
});L'élément drag est ajouté dans src / home / home.html -
<div style="height: 100%; width: 100%; padding: 40px;">
<div style="height: 100%; width: 100%; border: 1px solid #444; position: relative;">
<div drag-Item>
<img src="src/img/test.png" width="100" height="100" />
</div>
</div>
</div>Une image est utilisée pour faire glisser comme indiqué ci-dessous -
L'affichage dans le navigateur est le suivant -
Vous pouvez faire glisser l'image dans l'interface utilisateur et une fois que la souris est relâchée, elle reviendra à sa position d'origine, car nous avons utilisé drag.reset () dans la fonction de fin .
$drag.bind($element, {
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);Il existe des problèmes rencontrés sur certains appareils pour les éléments positionnés fixes. Pour travailler avec des zones de défilement, Mobile Angular UI utilise le débordement: auto .
Le modèle de zone de défilement est le suivant -
<div class="scrollable">
<div class="scrollable-content">...</div>
</div>Ajout d'en-têtes et de pieds de page dans les zones de défilement
En ajoutant des classes css .scrollable-header / .scrollable-footer , nous ajouterons un en-tête / pied de page fixe à la zone de défilement souhaitée. Vous n'avez pas à vous soucier de la hauteur et du positionnement, le css s'occupe de tout.
Le modèle d'en-tête / pied de page est présenté ci-dessous -
<div class="scrollable">
<div class="scrollable-header"><!-- ... --></div>
<div class="scrollable-content"><!-- ... --></div>
<div class="scrollable-footer"><!-- ... --></div>
</div>Directives dans les zones de défilement
Voici les directives qui sont très utiles lorsque vous travaillez avec des zones de défilement -
uiScrollTop- À utiliser lorsque vous souhaitez faire quelque chose lorsque le parchemin atteint le haut. Par exemple, ui-scroll-top = "callyourfunc ()".
uiScrollBottom- À utiliser lorsque vous voulez faire quelque chose lorsque le défilement atteint le bas. Par exemple, ui-scroll-bottom = "callyourfunc ()".
uiScrollableHeader- À utiliser lorsque vous voulez faire quelque chose lorsque le défilement atteint l'en-tête. Par exemple, ui-scroll-header = "callyourfunc ()".
uiScrollableFooter- À utiliser lorsque vous souhaitez faire quelque chose lorsque le défilement atteint le pied de page. Par exemple, ui-scroll-footer = "callyourfunc ()".
Un exemple de directive uiScrollBottom -
<div class="scrollable">
<div class="scrollable-content section" ui-scroll-bottom="callyourfunc()">
<ul>
<li ng-repeat="a in lists">
{{a.name}}
</li>
</ul>
</div>
</div>Voici un exemple fonctionnel de zones défilables.
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>
<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>
</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>src / js / 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"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!"
$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is
complimentary to and integrated with Java.
JavaScript is very easy to implement because it
is integrated with HTML. It is open and cross-platform.";
$scope.angularjs="AngularJS is a very powerful JavaScript Framework. It is used in Single Page
Application (SPA) projects. It extends HTML DOM
with additional attributes and makes it more
responsive to user actions. AngularJS is open
source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version 2.0.";
$scope.reactjs="React is a front-end library developed by Facebook. It is used for handling
the view layer for web and mobile apps. ReactJS
allows us to create reusable UI components. It is
currently one of the most popular JavaScript
libraries and has a strong foundation and large community behind it.";
var storyList=[];
for (var i=1; i <= 100; i++) {
storyList.push('My story no ' + i);
}
$scope.storylist=storyList;
$scope.bottom=function() {
alert('End of the stories');
};
});src / home / home.html
<div class="scrollable">
<div class="scrollable-header">My Stories List</div>
<div class="scrollable-content" ui-scroll-bottom="bottom()">
<div class="list-group">
<a ng-repeat="item in storylist" href="" class="list-group-item">
{{ item }} <i class="fa fa-chevron-right pull-right"></i>
</a>
</div>
</div>
<div class="scrollable-footer">End of the Stories</div>
</div>Voici l'affichage dans le navigateur -
Ce chapitre se concentrera sur les formulaires. Jetons un œil à un exemple pratique pour mieux comprendre les formulaires.
Dans index.html, le code sera le suivant -
<!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>
</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>In home/home.html
<div class="scrollable">
<div class="scrollable-content section">
<form name="myform" role="form" ng-submit='myform.$valid && addDetails()'>
<fieldset>
<legend>Personal Details</legend>
<div class="form-group has-success has-feedback">
<label>First Name</label>
<input type="text"
ng-model="fname"
class="form-control"
placeholder="Enter First Name" required>
</div>
<div class="form-group has-success has-feedback">
<label>Last Name</label>
<input type="text"
ng-model="lname"
class="form-control"
placeholder="Enter Last Name" required>
</div>
<div class="form-group has-success has-feedback">
<label>Email</label>
<input type="email"
ng-model="email"
class="form-control"
placeholder="Enter email" required>
</div>
</fieldset>
<hr>
<input class="btn btn-primary btn-block" type="submit" value="Save" />
</form>
</div>
</div>Le src / app.js aura les détails suivants -
/* 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"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.addDetails=function() {
alert("All details are saved!");
};
});L'affichage dans le navigateur est le suivant -
Entrez les détails dans le formulaire et cliquez sur le Save bouton.
Les fonctionnalités telles que toucher, glisser, faire glisser des éléments sont gérées par le module de gestes dans Mobile Angular UI. Le module de gestes a une directive et des services pour prendre en charge les fonctionnalités requises pour toucher, glisser et faire glisser.
Pour utiliser les fonctionnalités de gestes dans Mobile Angular UI, vous devez ajouter le module de gestes.
Ajoutez d'abord le fichier JavaScript dans index.html comme indiqué ci-dessous -
<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>Plus tard, ajoutez le module gestes en tant que dépendance dans app.js comme indiqué ci-dessous -
var app=angular.module('myFirstApp', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);Nous avons déjà discuté du fonctionnement de la fonctionnalité de glisser à l'aide du module de gestes. Jetez un œil à la même chose dansDrag and Drop Chapitre.
Ici, nous allons jeter un œil à la fonctionnalité de balayage.
La directive uiSwipeLeft et uiSwipeRight présente permet de détecter la direction dans laquelle l'utilisateur a glissé.
Voici un exemple de travail sur Swipe -
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>
<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>
</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>/js/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"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.testSwipe=function(direction) {
alert('You swiped ' + direction);
};
});src/home/home.html
<div class="scrollable">
<div class="scrollable-content section"
ui-swipe-left="testSwipe('left side')"
ui-swipe-right="testSwipe('right side')">
<h2>Testing of Swipe gesture</h2>
<div>
Swipe left and right to activate the uiSwipeLeft and uiSwipeRight Directive.
</div>
</div>
</div>Voici l'affichage dans le navigateur -
La directive pour swipe est ajoutée dans home.html.
<div class="scrollable-content section"
ui-swipe-left="testSwipe('left side')"
ui-swipe-right="testSwipe('right side')">Il appelle une méthode testSwipe (), elle est définie dans app.js.
$scope.testSwipe=function(direction) {
alert('You swiped ' + direction);
};L'interface utilisateur angulaire mobile propose des éléments de commutation à ui-switchdirectif. La directive ui-switch effectue une bascule lorsqu'elle est appliquée à une valeur booléenne ngModel.
Voici un exemple de travail d'interrupteur à bascule.
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>
<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
/* eslint no-alert: 0 */
'use strict';
//n mobile-angular-ui
//
var app=angular.
// Here is how to define your module
// has dependent omodule('myFirstApp', ['ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "src/home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to TutorialsPoint!";
});src/home/home.html
<div class="scrollable">
<div class="scrollable-content">
<form>
<h1>Testing Toogle Switch </h1>
<ui-switch id="enabled" name="enabled" ng-model="enabled" class="green"></ui-switch>
<p>{{ enabled }}</p>
</form>
</div>
</div>L'affichage dans le navigateur est le suivant -
Les sections sont des conteneurs qui sont affichés à l'intérieur du corps. Mobile Angular UI utilise les classes disponibles pour les sections afin de modifier la structure de la disposition.
Voici l'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>
<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
/* 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
<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>Le conteneur avec classe .app, contient la barre de navigation supérieure et inférieure et le contenu principal qui s'affiche à l'écran. La classe.app n'a pas de remplissage ou d'arrière-plan.
La classe .section a le css pour ajouter un remplissage et un arrière-plan.
Voici une mise en page sans section.
Après avoir ajouté la classe .section, vous verrez le remplissage ajouté à la mise en page -
<div class="app section"></div>
Il existe d'autres variations dans les sections pour la mise en page.
.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.Vous pouvez également jouer avec les classes supplémentaires comme .section-default, .section-primary, .section-success, .section-info, .section-warning ou .section-danger pour changer la disposition.
Le module Mobile Angular Core gère toutes les fonctionnalités de base. Vous pouvez l'utiliser dans l'application angulaire en utilisant 'mobile-angular-ui .core' comme module de dépendance. Dans les chapitres précédents, nous avons utilisé directement «mobile-angular-ui» qui contient également le module principal. Mais vous pouvez utiliser le module 'mobile-angular-ui.core' de manière autonome . Vous pouvez le faire lorsque vous avez besoin de fonctionnalités limitées, c'est-à-dire uniquement les fonctionnalités de base de Mobile Angular UI dans votre application.
Voici les sous-modules importants dont nous parlerons dans le module Mobile Angular Core -
Pour travailler avec Touch et ses événements, vous devez ajouter le module suivant -
mobile-angular-ui.gesturesSi vous êtes simplement intéressé par le module tactile, vous ne pouvez ajouter que mobile-angular-ui.gestures.touch .
$ touch est un service disponible avec module tactile. Il fonctionnera sur tous les périphériques d'entrée avec lesquels vous souhaitez travailler. Il donne des détails comme le mouvement, la durée, la vitesse, la direction, etc.
Méthodes dans $ touch
Voici les méthodes disponibles dans $ touch -
lier
Jetons un œil à la méthode bind .
Syntax
$touch.bind(element, eventHandlers, [options])Parameters
element - élément html dont vous souhaitez traiter les détails tactiles.
eventHandlers- Un objet avec des gestionnaires pour des événements tactiles spécifiques. Les eventHandlers disponibles sont -
start - c'est un rappel pour l'événement touchstart.
end - c'est un événement de rappel pour touchend.
move - c'est un rappel pour l'événement touchmove.
cancel - c'est un rappel pour l'événement touchcancel.
options - C'est un objet qui peut avoir des détails comme suit -
movementThreshold- Une valeur entière. Le nombre de pixels de mouvement avant de commencer à déclencher les gestionnaires touchmove.
valid - C'est une fonction qui renvoie une valeur booléenne qui décide si une touche doit être gérée ou ignorée.
sensitiveArea- Cela peut être une fonction, un élément ou BoundingClientRect. La zone sensible définit les limites pour libérer le toucher lorsque le mouvement est à l'extérieur.
pointerTypes - C'est un tableau de pointeurs qui a des clés qui sont un sous-ensemble de la carte d'événements de pointeur par défaut.
Types disponibles dans $ touch
Voici les types disponibles dans $ touch -
| Propriété | Type | La description |
|---|---|---|
| type | chaîne | Cela vous indiquera le type d'événement. Par exemple - touchmove, touchstart, touchend, touchcancel |
| horodatage | Date | L'horodatage du contact |
| durée | int | Différence entre l'événement tactile actuel et le démarrage tactile |
| startX | flotte | Coordonnée X du touchstart |
| startY | flotte | Coordonnée Y du touchstart |
| prevX | flotte | Coordonnée X du touchstart ou touchmove qui s'est produit précédemment |
| précédent | flotte | Coordonnée Y du touchstart ou touchmove qui s'est produit précédemment |
| X | flotte | Coordonnée X de l'événement tactile |
| y | flotte | Coordonnée Y de l'événement tactile |
| étape | flotte | La distance entre les points prevX, prevY et x, y |
| stepX | flotte | La distance entre les points prevX et x |
| stepY | flotte | La distance entre les points précédent et y |
| rapidité | flotte | Vitesse en pixels d'un événement tactile par seconde |
| vitesse moyenne | flotte | Vitesse moyenne de l'événement touchstart par seconde |
| distance | flotte | La distance entre les points startX, startY et x, y |
| distanceX | flotte | La distance entre les points startX et x |
| distanceY | flotte | La distance entre les points startY et y |
| total | flotte | Le mouvement total, c'est-à-dire le mouvement horizontal et vertical effectué à travers l'appareil |
| totalX | flotte | Le mouvement total, c'est-à-dire la direction horizontale, comprend également les retournements et les changements de direction |
| totalY | flotte | Le mouvement total, c'est-à-dire la direction verticale, comprend également les retournements et les changements de direction |
| direction | flotte | L'emplacement de direction gauche, haut, bas, droite du toucher |
| angle | flotte | L'angle en degrés des axes x et y |
Voici un exemple fonctionnel montrant les types de touches.
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>
<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>Il y a touchtest directive ajoutée dans app.js qui utilise la méthode $ touch.bind.
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();
}
});
}
};
}]);Le code complet dans app.js est le suivant -
/* 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"
});
$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!";
});src/home/home.html
La directive touchtest est utilisée dans le html comme indiqué ci-dessous -
<div class="section touchtest">
<h4>Touch Around on the screen to see the values changing</h4>
<div>
<p>type: {{touch.type}}</p>
<p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
<p>point: [{{touch.x}}, {{touch.y}}]</p>
<p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
<p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
<p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
<p>velocity: {{touch.velocity}} px/sec</p>
<p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
<p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
</div>
</div>Maintenant, testons l'affichage dans le navigateur. L'écran résultant est le suivant -
Dans ce chapitre, nous allons comprendre comment configurer l'application à l'aide de phonegap et cordova.
Commençons par installer ce qui suit dans notre système -
Dans ce chapitre, nous allons créer un fichier apk de l'application Mobile Angular UI. Nous allons utiliser la configuration de l'application effectuée à l'aide de cordova et phonegap dans le chapitre précédent. Veuillez donc consulter le chapitre précédent surApp Setup using PhoneGap and Cordova où nous avons déjà installé cordova, phonegap et créé l'application Mobile Angular UI à cordova.
Créons maintenant un fichier APK pour l'application créée. Pour cela, nous devons installer ce qui suit -
- Kit de développement Java (jdk 1.8)
- Gradle
- Outils du SDK Android
Kit de développement Java (jdk 1.8)
Pour créer l'application et la construire, une exigence importante est JDK 1.8. Nous avons besoin de la version de jdk en version 1.8 car c'est une version stable jusqu'à présent avec cordova build.
Allez sur le lien suivant pour installer jdk1.8.
Installez le Jdk selon votre système d'exploitation. Une fois l'installation terminée, il est nécessaire de mettre à jour le chemin de l'environnement JAVA_HOME. Si vous rencontrez des difficultés lors de l'installation de Jdk, reportez-vous à ceJava installation tutorial.
Pour que les utilisateurs de Windows mettent à jour Envionment Path, faites un clic droit sur Mon ordinateur → propriétés → Paramètres système avancés
Il affichera l'écran comme indiqué ci-dessous -
Cliquez sur Variables d'environnement. Il affichera l'écran comme indiqué ci-dessous -
Cliquez sur le bouton Nouveau, il affichera un écran comme indiqué ci-dessous -
Le nom de la variable sera JAVA_HOME et la valeur de la variable sera le chemin où se trouve jdk 1.8.
Une fois terminé, fermez votre invite de commande et ouvrez-la à nouveau. Maintenant, tapez java –version, il devrait afficher la version de java que vous avez installée comme indiqué ci-dessous -
Nous avons terminé l'installation de JAVA.
Gradle
Maintenant, installez gradle, qui est l'une des exigences importantes pour créer l'application.
Accédez à la page d' installation de Gradle et installez la dernière version de gradle selon votre système d'exploitation, téléchargez-la et installez-la sur votre système. Une fois installé, vous devez mettre à jour le chemin de Gradle dans les variables d'environnement. Si vous rencontrez des difficultés lors de l'installation, reportez-vous à ce tutoriel gradle .
Pour que les utilisateurs de Windows mettent à jour la variable d'environnement, ajoutez l'emplacement de gradle dans la variable Path comme indiqué ci-dessous -
Une fois terminé, fermez l'invite de commande si elle est ouverte. Ouvrez maintenant l'invite de commande et vérifiez la version de gradle installée.
Nous avons installé la version 6.2.2 de Gradle pour ce tutoriel.
Outils du SDK Android
Maintenant, installez Android Studio sur votre système. Avec Android Studio, le package sdk Android sera également installé. Nous sommes plus intéressés par le package Android SDK. Le package SDK aura des outils et des outils de construction, nous devons ajouter la même chose aux variables d'environnement pour que cordova puisse accéder pendant la construction. Si vous rencontrez des difficultés, reportez-vous à ce tutoriel pour l' installation d' Android Studio .
Pour les utilisateurs de Windows, recherchez le chemin du sdk android et ajoutez la variable ANDROID _SDK_ROOT à la variable d'environnement comme indiqué ci-dessous -
Ajoutez maintenant les outils et le chemin des outils de construction par exemple -
C:\Users\AppData\Local\Android\Sdk\build-tools;C:\Users\AppData\Local\Android\Sdk\tools\bin;À la variable de chemin à la fin comme indiqué ci-dessous -
Une fois terminé, fermez l'invite de commande et ouvrez-la à nouveau.
Exécutez la commande: sdkmanager "platform-tools" "plates-formes; android-28" dans l'invite de commande. Il installera l'API cible android-28 dont nous avons besoin. Pour plus de détails sur sdkmanager, reportez-vous au lien ci-dessous -
Nous avons déjà créé une configuration de projet en utilisant cordova et phonegap dans le chapitre précédent. Voici à quoi ressemble l'application dans le navigateur -
Vérifions maintenant si cordova a tous les détails pour créer l'application. Pour ce faire, nous pouvons utiliser la commande suivante - exigences de cordova .
Construisez l'application
Pour créer l'application à l'aide de cordova, la commande est la suivante -
cordova buildLa commande ci-dessus créera l'application pour toutes les plates-formes que vous avez ajoutées.
Pour exécuter la plate-forme de construction, vous pouvez utiliser la commande suivante -
cordova build ios
cordova build androidNous avons ajouté pour une seule plate-forme, c'est-à-dire Android, nous pouvons donc utiliser directement la commande de construction cordova.
Si la construction réussit, vous devriez obtenir la sortie suivante -
Il affiche l'emplacement du fichier apk de l'application. Nous avons maintenant l'apk, mais nous ne pouvons pas publier le même, car il s'agit d'un app-debug.apk. Nous avons besoin d'une version apk qui puisse être publiée sur Google Play Store.
Version de l'application
Pour créer une version d'application, nous devons créer un magasin de clés. Un fichier de clés est un fichier contenant des clés privées et des certificats.
Pour créer un fichier de keystore, vous utiliserez JAVA keytool. Un keytool JAVA est un outil qui permet de créer un certificat.
Voici la commande pour créer un keystore -
keytool -genkey -v -keystore testapp-key.keystore
-alias testapp-key -keyalg RSA -keysize 2048 -validity 10000Le nom du keystore que nous avons utilisé est le suivant -
testapp-key.keystoreL'alias est testapp-key identique au nom.
Exécutez la commande dans la ligne de commande à partir du dossier racine du projet.
Lorsque la commande s'exécute, elle vous posera des questions, telles que le mot de passe, le prénom et le nom, l'unité d'organisation, la ville, l'état, etc. le dossier racine du projet.
Une fois le fichier de clés terminé, créez un build.json dans myfirstapp \ testapp \ plates-formes \ android \ build.json.
Les détails sont indiqués ci-dessous -
{
"android":{
"release":{
"keystore":"testapp-key.keystore",
"storePassword":"testapp123",
"alias":"testapp-key",
"password":"testapp123",
"keystoreType":""
}
}
}Vous devrez entrer les détails du keystore, ainsi que le mot de passe que vous avez entré lors de la génération du keystore.
Une fois que le keystore et build.json sont terminés, nous sommes maintenant prêts à construire l'apk pour la publication.
Voici la commande pour le construire -
cordova build android --release
Une fois la construction réussie, vous obtiendrez l'apk de version comme indiqué ci-dessous -
Vous pouvez maintenant utiliser cet apk dans votre Google Play Store pour le publier et mettre votre application en ligne.
Google Play Store
Une fois que vous avez prêt app-release.apk, vous devez le télécharger sur Google Play Store. Pour téléverser, vous devez vous connecter à Google Play Store. Le premier utilisateur doit payer 25 $ comme prix de départ du développeur. Une fois que cela est fait, vous pouvez continuer et télécharger votre fichier apk. Vous pouvez suivre les étapes indiquées ici pour télécharger votre fichier APK.
Dans ce chapitre, nous discuterons de l'utilisation de l'utilisation d'AngularJS et d'Ionic pour le développement d'applications.
Ionic est un framework open source utilisé pour développer des applications mobiles. Il fournit des outils et des services pour créer une interface utilisateur mobile avec une apparence et une convivialité natives. Le framework Ionic a besoin d'un wrapper natif pour pouvoir fonctionner sur les appareils mobiles.
Dans ce chapitre, nous apprendrons uniquement les bases sur la façon dont nous pouvons utiliser l'interface utilisateur angulaire ionique et mobile pour développer votre application.
Pour plus de détails sur l'ionic, consultez -
Pour commencer à travailler avec ionic et angularjs, nous devons d'abord installer cordova. La commande est la suivante -
npm install -g cordovaCréation de la configuration de projet à l'aide de Cordova
Créez un dossier ionic_mobileui / et dans lequel nous créons notre configuration de projet en utilisant la commande ci-dessous -
cordova create ionic-mobileui-angularjsIci, ionic-mobileui-angularjs est le nom de notre application.
Maintenant, installons les packages dont nous avons besoin dans notre projet. La liste est donnée ci-dessous -
npm install --save-dev angular angular-route mobile-angular-ui @ionic/coreLes fichiers sont installés et la structure des dossiers est indiquée ci-dessous -
Tous les fichiers angulaires et ioniques sont à l'intérieur de node_modules. Nous allons utiliserwww/dossier. Déplacez donc les fichiers angulaires et ioniques js et css à l'intérieurwww/css/ et www/js/ Dossiers.
Modifions l'index.html avec des composants d'interface utilisateur angulaire mobiles et ajoutons également app.js dans js/ dossier.
index.html
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements.
See the NOTICE file distributed with this work for additional information regarding copyright
ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License. You may obtain a
copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
express or implied. See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<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="css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/mobile-angular-ui.min.js"></script>
<script src="js/ionic.js"></script>
<link rel="stylesheet" href="css/app.css" />
<script 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>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>Tous les js et cssles fichiers sont ajoutés dans la section head. Le module et le contrôleur sont créés dans app.js comme indiqué ci-dessous -
/* 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'
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl : "home/home.html"
});
$locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('dragItem', ['$drag', function($drag) {
return {
controller: function($scope, $element) {
$drag.bind($element,
{
transform: $drag.TRANSLATE_BOTH,
end: function(drag) {
drag.reset();
}
},
{
sensitiveArea: $element.parent()
}
);
}
};
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
$scope.msg="Welcome to Tutorialspoint!";
});Créez le fichier home / home.html dans le dossier www /. Voici les détails dans home.html.
<div class="list-group text-center">
<div class="list-group-item list-group-item-home">
<h1>{{msg}}</h1>
</div>
</div>Pour exécuter l'application à l'aide de cordova, exécutez la commande suivante -
cordova platform add browserEnsuite, exécutez la commande ci-dessous pour tester l'application dans le navigateur -
cordova run
Frappez l'url: http://localhost:8000 dans le navigateur, pour tester l'application.
Ajout d'un composant ionique à l'application d'interface utilisateur mobile angulaire
Ouvrez home / home.html, ajoutez le modèle de carte ionique suivant -
home / home.html
<ion-card>
<ion-card-header>
<ion-card-subtitle>Ionic Card</ion-card-subtitle>
<ion-card-title>Mobile Angular UI + Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
Welcome To TutorialsPoint!
</ion-card-content>
</ion-card>Une fois terminé, arrêtez cordova et exécutez-le à nouveau. Vous devriez voir les détails de la carte ionique comme indiqué ci-dessous -
Vous pouvez maintenant créer une application de votre choix en utilisant AngularJs, Mobile Angular UI et Ionic.
Dans ce chapitre, nous examinerons un exemple d'application créée à l'aide de Mobile Angular UI. Les fichiers requis sont mentionnés ci-dessous, avec les détails du code.
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>Dans app.js, nous allons construire la ngroute pour toutes les routes mentionnées ici -
<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!";
});Les itinéraires pour les liens dans la barre latérale sont répertoriés ici -
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});
});À l'heure actuelle, nous avons ajouté pour la maison, l'enseignement et les bigdata. De même, vous pouvez concevoir l'application de votre choix et ajouter des itinéraires comme indiqué ci-dessus.
Le fichier home / home.html sera le suivant
<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>L'affichage dans le navigateur pour - Page d'accueil est le suivant -
L'affichage dans le navigateur lorsque l'utilisateur clique sur Tutoriels -
Cliquez maintenant sur Tutoriels académiques -
Cliquez sur Tutoriels → Big Data
