简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Explication détaillée des étapes pour implémenter la boîte de dialogue ngDialog dans Node.js

Explication détaillée des étapes pour implémenter la boîte de dialogue ngDialog dans Node.js

php中世界最好的语言
php中世界最好的语言original
2018-05-22 10:45:591774parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre de l'utilisation de la boîte de dialogue ngDialog dans Node.js. Quelles sont les précautions à prendre pour utiliser la boîte de dialogue ngDialog dans Node.js ? jetez un oeil.

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 :