suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Implementieren des Dialogfelds ngDialog in Node.js

Detaillierte Erläuterung der Schritte zum Implementieren des Dialogfelds ngDialog in Node.js

php中世界最好的语言
php中世界最好的语言Original
2018-05-22 10:45:591808Durchsuche

Dieses Mal werde ich Ihnen die Implementierungsschritte für die Verwendung des Dialogfelds ngDialog in Node.js ausführlich erläutern. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Beim Erstellen einer Website stoßen wir häufig auf Situationen, in denen ein Dialogfeld angezeigt wird, in dem Benutzereingaben eingeholt werden, oder ein Dialogfeld angezeigt wird, in dem der Benutzer aufgefordert wird, einen Vorgang zu bestätigen. Es gibt ein auf AngularJS basierendes Erweiterungsmodul, das dies kann Helfen Sie uns, so etwas elegant zu bewerkstelligen: ngDialog.

ngDialog bietet hier eine Beispielwebseite auf Github, die die verschiedenen Einsatzmöglichkeiten demonstriert: https://github.com/likeastore/ngDialog/blob/master/example/index.html. Die Readme-Datei auf der Github-Homepage von ngDialog bietet außerdem eine detailliertere Einführung in häufig verwendete Anweisungen und Dienste, auf die Sie verweisen können. Mein Artikel basiert ausschließlich auf dem ngDialog-Beispiel.

Das Erstellen eines Dialogfelds kann mit ngDialog.open(options) oder ngDialog.openConfirm(options) erfolgen. Ersteres öffnet ein normales Dialogfeld, und eine Reihe von Attributen wie Themen und Vorlagen können über Optionen angegeben werden. Letzteres öffnet ein Dialogfeld, das standardmäßig nicht geschlossen werden kann und außerhalb des Dialogfelds automatisch geschlossen wird. Optionen ist ein JSON-Objekt, ähnlich dem folgenden: 

{template: 'tplId',closeByEscape: false}

Beispielsetup

Werfen wir zunächst einen Blick auf mein einfaches Beispiel. Verwenden Sie den Express-Generator, um eine neue Anwendung zu erstellen, oder verwenden Sie direkt das LoginDemo-Beispiel in Erste Schritte mit der Node.js-Entwicklung – Verwenden von Cookies, um angemeldet zu bleiben. Alles ist erledigt.

Fügen Sie die von Ihnen geschriebenen Dateien hinzu

Die Dateien ngdialog.html und serverTpl.html werden im öffentlichen Verzeichnis des Projekts abgelegt .js wird im öffentlichen Verzeichnis des Projekts unter public/javascripts abgelegt.

ngdialog.html-Inhalt: 

<!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>

ngdialog.js-Inhalt: 

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

serverTpl.html-Inhalt: 

<!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>

Wir stellen vor: ngDialog

Um ngDialog zu verwenden, müssen Sie ein Skript in HTML verwenden, um die entsprechende js-Bibliotheksdatei einzuführen. Darüber hinaus müssen im Kopfteil mehrere CSS-Dateien eingefügt werden. Beziehen Sie sich einfach auf ngdialog.html.

Die Bibliotheksdatei von ngDialog kann von https://github.com/likeastore/ngDialog oder hier heruntergeladen werden: http://cdnjs.com/libraries/ng-dialog. Ich habe die Datei unter dem untenstehenden Link in Version 0.4.0 umbenannt. Die umbenannten Dateien lauten wie folgt:

  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

API-Zusammenfassung des Lernens

Ich bin beim Lernen auf einige Zweifel gestoßen, die unten aufgeführt sind.

Dialoginhaltsvorlage

Um ein Dialogfeld anzuzeigen, müssen Sie den anzuzeigenden Inhalt angeben. Dies wird über das Template-Attribut angegeben. Es gibt drei Fälle von Vorlagen:

  1. Eine in JS- oder HTML-Code eingebettete Nur-Text-Vorlage. Zu diesem Zeitpunkt müssen Sie das Plain-Attribut gleichzeitig in den Optionen auf true setzen. das heißt „plain:true“, und weisen Sie dann der Vorlage direkt einen HTML-Code zu, z. B. template:

    Text in ngDialog

  2. Define die Vorlagenvorlage in HTML und weisen Sie der Vorlage einen Wert zu, z. B. „template: ‚templateId‘“. Die Vorlage könnte so aussehen: