How to use Node.js dialog box ngDialog-JS Tutorial-php.cn

This time I will show you how to use the dialog box ngDialog in Node.js, and what are theprecautionswhen operating Node.js and use the dialog box ngDialog. 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 demonstrating 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}

Copy after login

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:

use ngDialog in AngularJS

Copy after login

ngdialog.js content:

angular.module('myApp', ['ngDialog']). controller('myController', function($scope,$rootScope, ngDialog){ $scope.template = '
text in dialog
'; //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: '
Text in Modal Dialog
', 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: '
Please enter your name
User Name:
', 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')); }); });

Copy after login

serverTpl.html content:

A Server Template for ngDialog

Server Template for ngDialog

Node.js

Express

AngularJS

MongoDB

Copy after login

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: