recherche

Maison >interface Web >js tutoriel >Comment utiliser la boîte de dialogue Node.js ngDialog

Comment utiliser la boîte de dialogue Node.js ngDialog

php中世界最好的语言
php中世界最好的语言original
2018-05-30 11:37:171413parcourir

Cette fois, je vais vous montrer comment utiliser la boîte de dialogue ngDialog dans Node.js. Quelles sont les précautions lors de l'utilisation de Node.js et de l'utilisation de la boîte de dialogue ngDialog. Voici des cas pratiques, prenons. un regard.

Lors de la création d'un site Web, nous rencontrons souvent des situations dans lesquelles une boîte de dialogue apparaît pour obtenir la saisie de l'utilisateur ou une boîte de dialogue apparaît pour demander à l'utilisateur de confirmer une opération. Il existe un module d'extension basé sur AngularJS qui peut le faire. aidez-nous à accomplir ce genre de chose avec élégance : ngDialog.

ngDialog fournit un exemple de page Web sur github démontrant ses différentes utilisations, ici : https://github.com/likeastore/ngDialog/blob/master/example /index.html. Le fichier readme de la page d'accueil github de ngDialog fournit également une introduction plus détaillée aux instructions et services couramment utilisés, auxquels vous pouvez vous référer. Mon article est uniquement basé sur l'exemple ngDialog.

La création d'une boîte de dialogue peut être effectuée en utilisant ngDialog.open(options) ou ngDialog.openConfirm(options). Le premier ouvre une boîte de dialogue normale et une série d'attributs tels que des thèmes et des modèles peuvent être spécifiés via des options. Le second ouvre une boîte de dialogue qui refuse par défaut de fermer l'échappement et se ferme automatiquement en dehors de la boîte de dialogue. options est un objet json, similaire au suivant : 

{template: 'tplId',closeByEscape: false}

Exemple de configuration

Regardez d'abord mon exemple simple. Utilisez le générateur express pour créer une nouvelle application ou utilisez directement l'exemple LoginDemo dans Premiers pas avec le développement Node.js - Utiliser des cookies pour rester connecté. Tout est fait.

Ajouter des fichiers écrits par vous-même

Il y a trois fichiers écrits par vous-même, les fichiers ngdialog.html et serverTpl.html sont placés dans le répertoire public du projet, et ngdialog.js est placé sous public/javascripts.

Contenu ngdialog.html : 

<!doctype html>
<html ng-app="myApp">
<head>
 <title>use ngDialog in AngularJS</title>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-0.4.0.min.css&#39; ><link/>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-theme-default-0.4.0.min.css&#39; ><link/>
 <link rel=&#39;stylesheet&#39; href=&#39;/stylesheets/ngDialog-theme-plain-0.4.0.min.css&#39; ><link/>
</head>
<body ng-controller=&#39;myController&#39;>
 <p><button type=&#39;button&#39; ng-click=&#39;openDialog()&#39;>Open Default</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openPlainDialog()&#39;>Open Plain theme</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openDialogUseText()&#39;>Open use text</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openModal()&#39;>Open modal</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openUseExternalTemplate()&#39;>Open use template on server</button></p>
 <p><button type=&#39;button&#39; ng-click=&#39;openConfirmDialog()&#39;>Open Confirm</button></p>
 <script src="/javascripts/angular-1.4.3.min.js"></script>
 <script src="/javascripts/ngDialog-0.4.0.min.js"></script>
 <script src="/javascripts/ngdialog.js"></script>
 <!-- Templates -->
 <script type="text/ng-template" id="firstDialogId">
  <p><p>text in dialog</p></p>
 </script>
</body>
</html>

Contenu ngdialog.js : 

angular.module('myApp', ['ngDialog']).
 controller('myController', function($scope,$rootScope, ngDialog){
  $scope.template = '<p><p>text in dialog</p><p><button type="button">Button</button></p><p>';
  //different template
  $scope.openDialog = function(){
   ngDialog.open({template: 'firstDialogId'});
  };
  $scope.openPlainDialog = function(){
   ngDialog.open({
    template: 'firstDialogId', //use template id defined in HTML
    className: 'ngdialog-theme-plain'
   });
  }
  $scope.openDialogUseText = function(){
   ngDialog.open({
    template: $scope.template, //use plain text as template
    plain: true,
    className: 'ngdialog-theme-plain'
   });
  }
  $scope.openModal = function(){
   ngDialog.open({
    template: '<p>Text in Modal Dialog</p>',
    plain: true,
    className: 'ngdialog-theme-default',
    closeByEscape: false,
    closeByDocument: false
   });
  }
  $scope.openUseExternalTemplate = function(){
   ngDialog.open({
    template: 'serverTpl.html',
    plain: false,
    className: 'ngdialog-theme-default',
    closeByEscape: false,
    closeByDocument: false
   });
  };
  $rootScope.userName = "ZhangSan";
  $scope.openConfirmDialog = function(){
   ngDialog.openConfirm({
    template: '<p class="ngdialog-message"><h3>Please enter your name</h3><p>User Name:<input ng-model="userName"></input></p></p><p class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Cancel</button><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(userName)">Confirm</button></p>',
    plain: true,
    className: 'ngdialog-theme-default'
   }).then(
    function(value){
     console.log('confirmed, value - ', value);
    },
    function(reason){
     console.log('rejected, reason - ', reason);
    }
   );
  }
  //listen events
  $rootScope.$on('ngDialog.opened', function (e, $dialog) {
    console.log('ngDialog opened: ' + $dialog.attr('id'));
  });
  $rootScope.$on('ngDialog.closed', function (e, $dialog) {
    console.log('ngDialog closed: ' + $dialog.attr('id'));
  });  
 });

Contenu serverTpl.html : 

<!doctype html>
<html>
<head>
 <title>A Server Template for ngDialog</title>
</head>
<body>
 <p>
  <h3>Server Template for ngDialog</h3>
  <li>Node.js</li>
  <li>Express</li>
  <li>AngularJS</li>
  <li>MongoDB</li>
 </p>
</body>
</html>

Introduire ngDialog

Pour utiliser ngDialog, vous devez utiliser un script en HTML pour introduire le fichier de bibliothèque js correspondant. De plus, plusieurs fichiers css doivent être introduits dans la partie head. Reportez-vous simplement à ngdialog.html.

Le fichier de bibliothèque de ngDialog peut être téléchargé depuis https://github.com/likeastore/ngDialog, ou téléchargé ici : http://cdnjs.com/libraries/ng-dialog. J'ai renommé le fichier en version 0.4.0 sous le lien ci-dessous. Les fichiers renommés sont les suivants :

  1. ngDialog-0.4.0.min.js

  2. ngDialog-0.4.0.min.css<.>

  3. ngDialog-theme-default-0.4.0.min.css

  4. ngDialog-theme-plain-0.4.0.min.css<.>

Résumé de l'apprentissage de l'API

J'ai rencontré quelques doutes lors de l'apprentissage, qui sont enregistrés ci-dessous.

Modèle de contenu de boîte de dialoguePour afficher une boîte de dialogue, vous devez préciser le contenu à afficher. Ceci est spécifié via l'attribut template. Il existe trois cas de modèle :

    Un modèle de texte brut intégré dans du code js ou html À ce stade, vous devez définir l'attribut plain sur true dans les options en même temps, c'est-à-dire "plain:true", puis attribuez directement un morceau de code HTML au modèle, tel que template:

    Text in ngDialog

    2. Define le modèle de modèle en HTML et attribuez l'identifiant au modèle. Attribuez une valeur à l'option de modèle, telle que "template: 'templateId'". Le modèle peut ressembler à ceci :