Home > Article > Web Front-end > Detailed explanation of the steps to implement the dialog box ngDialog in Node.js

Detailed explanation of the steps to implement the dialog box ngDialog in Node.js

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

This time I will bring you a detailed explanation of the implementation steps of using the dialog box ngDialog in Node.js. What are the precautions for using the dialog box ngDialog in Node.js? The following is a practical case, let's take a look.

When building a website, we often encounter situations where a dialog box pops up to obtain user input or a dialog box pops up to ask the user to confirm an operation. There is an extension module based on AngularJS that can help us accomplish this kind of thing elegantly: ngDialog.

ngDialog provides an example web page on github that demonstrates its various uses, here: https://github.com/likeastore/ngDialog/blob/master/example/index.html. The readme of ngDialog's github homepage also provides a more detailed introduction to commonly used instructions and services, which you can refer to. My article is purely based on the ngDialog example.

Create a dialog box using ngDialog.open(options) or ngDialog.openConfirm(options). The former opens a normal dialog box, and a series of attributes such as themes and templates can be specified through options. The latter opens a dialog box that by default refuses escape to close and automatically closes outside of the dialog box. options is a json object, similar to the following:

{template: 'tplId',closeByEscape: false}

Example setup

Let’s take a look at my simple example first. Use the express generator to create a new application, or directly use the LoginDemo example in Getting Started with Node.js Development - Using Cookies to Stay Logged In. Everything is done.

Add files written by yourself

There are three files written by yourself. The ngdialog.html and serverTpl.html files are placed in the public directory of the project, and ngdialog.js is placed in the public directory of the project. Under public/javascripts.

ngdialog.html content:

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

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 content:

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

Introducing ngDialog

To use ngDialog, you need to use script to introduce the corresponding js library file in HTML. In addition, several css files must be introduced in the head part. Just refer to ngdialog.html.

ngDialog library files can be downloaded from https://github.com/likeastore/ngDialog, or downloaded here: http://cdnjs.com/libraries/ng-dialog. I renamed the file in version 0.4.0 under the link below. The renamed files are as follows:

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

API summary learning

I encountered some doubts when learning, which are recorded below.

Dialog content template

To display a dialog box, you must specify the content to be displayed. This is specified via the template attribute. There are three cases of template:

Plain text template embedded in js or html code. At this time, you need to set the plain attribute to true in options at the same time, that is, "plain: true", and then Directly assign a piece of html code to the template, for example, template:
Text in ngDialog
Define the template template in HTML, and assign the id to the template. Assign a value to the template option, such as "template: 'templateId'". The template may look like this: