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

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}

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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 :

ngDialog-0.4.0.min.js
ngDialog-0.4.0.min.css<.>
ngDialog-theme-default-0.4.0.min.css
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 :

Text in ngDialog

Derniers articles par auteur