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

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:

nbsp;html>


 <title>use ngDialog in AngularJS</title>
 <link><link>
 <link><link>
 <link><link>


 <p><button>Open Default</button></p>
 <p><button>Open Plain theme</button></p>
 <p><button>Open use text</button></p>
 <p><button>Open modal</button></p>
 <p><button>Open use template on server</button></p>
 <p><button>Open Confirm</button></p>
 <script></script>
 <script></script>
 <script></script>
 <!-- Templates -->
 <script>
  <p><p>text in dialog
 </script>

ngdialog.js content:

angular.module('myApp', ['ngDialog']).
 controller('myController', function($scope,$rootScope, ngDialog){
  $scope.template = '<p></p><p>text in dialog</p><p><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><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></p><h3 id="Please-enter-your-name">Please enter your name</h3><p>User Name:<input></p><p><button>Cancel</button><button>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:

nbsp;html>


 <title>A Server Template for ngDialog</title>


 <p>
  </p><h3 id="Server-Template-for-ngDialog">Server Template for ngDialog</h3>
  

Node.js

  

Express

  

AngularJS

  

MongoDB

 

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:

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

1. 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

2. 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:

   > ;

3. Use an external html fragment (file) as a template, such as "template: 'serverTpl.html'", the serverTpl.html file is on the server.

Specify the theme

You can specify the theme through className in options. Currently there are ngdialog-theme-default and ngdialog -theme-plain two themes. These two notes correspond to two css files, which we have introduced through HTML earlier.

Response to closing and other events

When the dialog box is closed, some events will be emitted, and developers can listen to these events to get notifications. The specific events are:

1. ngDialog.opened

2. ngDialog.closing

3. ngDialog.closed

这些事件定义在$rootScope服务里，所以我们的controller构造函数必须依赖$rootScope。比如我们现在的模块定义和controller定义：

angular.module(‘myApp', [‘ngDialog']). 
controller(‘myController', function(scope,scope,rootScope, ngDialog){

在模块定义里注明依赖ngDialog模块，在controller定义里注入了$rootScope和ngDialog。

如何监听事件，看ngdialog.js代码吧。

另外我们还可以在options中设置preCloseCallback，指定一个函数，这个函数在对话框取消关闭之前会调用到。https://github.com/likeastore/ngDialog这里有说明。注意，是取消对话框时会调用到，如果确认，不会调到哦。所以，这个preCloseCallback通常在阻止或提醒用户放弃输入时使用，比如用户注册，输入了一些信息，想退，你可以问他是否要真的想放弃。

指定对话框的controller

可以通过options设置controller属性来给一个对话框指定控制器。这个控制器可以是内联（inline）的：

    $scope.openInlineController = function () {
      $rootScope.theme = 'ngdialog-theme-plain';
      ngDialog.open({
        template: 'withInlineController',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
          var counter = 0;
          var timeout;
          function count() {
            $scope.exampleExternalData = 'Counter ' + (counter++);
            timeout = $timeout(count, 450);
          }
          count();
          $scope.$on('$destroy', function () {
            $timeout.cancel(timeout);
          });
        }],
        className: 'ngdialog-theme-plain'
      });
    };

也可以是在js中定义的。比如我们在js里定义了一个名为“InsideCtrl”的controller，就可以在调用ngDialog.open(options)时在options里设置controller属性：

$scope.openInsideController = function(){
 ngDialog.open({
  template: "serverTpl.html",
  className: "ngdialog-theme-plain",
  controller: "InsideCtrl"
 });
};

具体示例可以参考：https://github.com/likeastore/ngDialog/blob/master/example/index.html。

确认对话框

比如让用户确认删除，让用户输入。使用openConfirm(options)就可以创建这样的对话框。ngDialog向$scope注入了两个函数，一个是confirm(value)，一个是closeThisDialog(reason)，分别用来确认关闭对话框，取消关闭对话框。将它们关联到确认和取消按钮上，就可以确认、取消对话框。

假如我要让用户输入用户名，可以用ng-model指令将作用域内某个变量和input绑定，在调用confirm时传入绑定的变量，这样就可以在confirm中拿到用户填写的值来做进一步处理。我们的示例中的openConfirmDialog按钮，点击后就弹出一个让用户输入名字的对话框，当用户输入完毕，点击Confirm按钮时，我们可以通过confirm方法的value参数获得用户名输入框的值。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS实现下拉框联动步骤详解

node前端开发模板引擎Jade使用步骤详解

The above is the detailed content of Detailed explanation of the steps to implement the dialog box ngDialog in Node.js. For more information, please follow other related articles on the PHP Chinese website!