Node. js development entry-Use Dialog Box ngDialog

Node. js development entry-Use Dialog Box ngDialog

Websites often encounter pop-up dialog box to get user input or pop-up dialog box to let users confirm an operation and so on. There is an extension module based on AngularJS that can help us perform this kind of thing elegantly:NgDialog.

NgDialogA sample webpage is provided on github to demonstrate its usage. Here, readme on the github homepage of ngDialog also gives a detailed introduction to commonly used commands and services, for more information, see. This article is purely based on the ngDialog example.

The create dialog box can be ngDialog. open (options) or ngDialog. openConfirm (options ). The former opens a normal dialog box, and you can use options to define a series of attributes, such as a topic and a template. The latter opens a dialog box that rejects escape closure by default and automatically closes after clicking the dialog box. Options is a json object, similar to the following:

{template: 'tplId',closeByEscape: false}

Build an example

Let's take a look at my simple example. Use express generator to create a new application, or directly useGetting started with Node. js development-Keep logging on with cookies. .

Add a self-written file

The ngdialog.htmland servertpl.html files are stored in the public directory of the project, and ngdialog. js files are stored in the public/javascripts directory.

Ngdialog.html content:

Open Default

Open Plain theme

Open use text

Open modal

Open use template on server

Open Confirm

<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> <script type=text/ng-template id=firstDialogId>

text in dialog

</script>

Ngdialog. js content:

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

text in dialog

Button

'; //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:

CancelConfirm ', 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:

Server Template for ngDialog

• Node.js
• Express
• AngularJS
• MongoDB

Introduce ngDialog

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

The ngDialog library file can be used. I renamed the file in version 0.4.0 in the following link. Several 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.cssAPI abstract Learning

I encountered some questions during my study and recorded them below.

Dialog Box content Template

To display a dialog box, you must specify the content to be realistic. This is specified through the template attribute. There are three scenarios for template:

A plain text template embedded in Javascript or html code. In this case, you must set the plain attribute to true in options, that is, "plain: true ", then a piece of html code is directly assigned to the template, such as template:

Text in ngDialog

Define a template in HTML, specify an id for the template, and assign the id to the template option, for example, "template: 'templateid '". The template may be like this: <script type=text/ng-template id=firstDialogId>

text in dialog

</script>External html fragments (Files) are templates, for example, "template: 'servertpl.html', And the servertpl.html file is on the server. Topic

You can use className to specify a topic in options. Currently, two themes are ngdialog-theme-default and ngdialog-theme-plain. These two notes correspond to two css files. We have introduced them through HTML.

Respond to close events and other events

When the dialog box is closed, some events are triggered. developers can listen to these events to receive notifications. Specific events include:

NgDialog. opened ngDialog. closing ngDialog. closed

These events are defined in$rootScopeService, so our controller constructor must depend on$rootScope. For example, our current module definition and controller definition:
Angular. module ('myapp', ['ngdialog ']).
Controller ('mycontroller', function ( Scope, RootScope, ngDialog ){

In the module definition, indicate the dependency on the ngDialog module, and inject$rootScopeAnd ngDialog.

For how to listen to events, see the ngdialog. js code.

In addition, you can set preCloseCallback in options to specify a function, which will be called before the function is canceled in the dialog box. Https://github.com/likeastore/ngdialoghere is a description. Note: It will be called when the dialog box is canceled. If confirmed, it will not be adjusted. Therefore, this preCloseCallback is usually used when a user is blocked or reminded to give up the input. For example, if the user registers, enters some information, and wants to return the information, you can ask whether the user really wants to give up.

Specify the controller in the dialog box

You can use options to set the controller attribute to specify a controller for a dialog box. This controller can be 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'            });        };

It can also be defined in js. For example, if we define a controller named "InsideCtrl" in js, we can set the controller attribute in options when calling ngDialog. open (options:

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

 

Confirmation dialog box

For example, ask the user to confirm the deletion and ask the user to input. You can use openConfirm (options) to create such a dialog box. NgDialog injects two functions into $ scope: confirm (value) and closeThisDialog (reason) to confirm the closing dialog box and cancel the closing dialog box. Associate them with the confirm and cancel buttons to confirm and cancel the dialog box.

If you want to enter the user name, you can use the ng-model command to bind a variable in the scope to the input, and input the bound variable when you call confirm, in this way, you can get the value entered by the user in confirm for further processing. In our example, the openConfirmDialog button is displayed. After you click it, a dialog box for users to enter a name is displayed. When the user input is complete, click the Confirm button, we can use the value parameter of the confirm method to obtain the value of the user name input box.