Get started with node. JS Development-Using dialog box Ngdialog

Source: Internet
Author: User

Do the site often encounter pop-up dialog to get user input or pop-up dialog to let the user confirm an operation and other scenarios, there is a angularjs-based extension module can help us to complete this kind of things gracefully:ngdialog.

Ngdialog provides a sample web page on GitHub that demonstrates its various uses, here: https://github.com/likeastore/ngDialog/blob/master/example/index.html. Ngdialog's GitHub homepage also provides a more detailed introduction to commonly used directives and services, which can be consulted. My article is purely a reference to Ngdialog's example.

The Create dialog box can be either ngdialog.open (options) or ngdialog.openconfirm (options). The former opens a normal dialog box that allows you to create a series of properties, such as themes, templates, and so on, which opens a default deny escape close and automatically closes the dialog box outside of the Click dialog box. The options are JSON objects, similar to the following:

{template: ‘tplId‘,closeByEscape: false}
Example Build

Let's take a look at my simple example. Use Express generator to create a new app, or get started with node. JS Development-Using cookies to keep The Logindemo example in login. are.

Add a file you write yourself

There are three self-written files, ngdialog.html and servertpl.html files placed under the public directory of the project, Ngdialog.js under Public/javascripts.

Ngdialog.html content:

<!doctype html>

Ngdialog.js content:

Angular.module (' myApp ', [' Ngdialog ']). Controller (' Mycontroller ', function ($scope, $rootScope, Ngdialog) {$scope. Template = ' <div><p>text in    Dialog</p><p><button type= "button" >Button</button></p><div> ";    Different template $scope. OpenDialog = function () {Ngdialog.open ({Template: ' Firstdialogid '});    }; $scope. Openplaindialog = function () {Ngdialog.open ({Template: ' Firstdialogid ',//use template ID defined in H    TML className: ' Ngdialog-theme-plain '}); } $scope. Opendialogusetext = function () {Ngdialog.open ({Template: $scope. Template,//use Plain text as tem    Plate 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: ' <div class= "Ngdialog-message" >& Lt;h3>please Enter your name

Servertpl.html content:

<!doctype html>
Introduction of Ngdialog

To use Ngdialog, you need to use script in HTML to introduce the corresponding JS library file. There are also several CSS files to be introduced in the head section. Refer to ngdialog.html.

Ngdialog library files can be downloaded to Https://github.com/likeastore/ngDialog, or downloaded here: Http://cdnjs.com/libraries/ng-dialog. I was in the back of this link under the 0.4.0 version, the file was renamed a bit. Several files after renaming 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 had some doubts when I was studying, and I recorded it below.

dialog box content template

To display a dialog box, you must specify what you want to be realistic. This is specified through the template property. There are three types of template:

    • Embedded in the JS or HTML code text template, at this time need to set the plain property in the options is true, that is, "plain:true", and then directly assign a piece of HTML code to the template, such as Template:<p>Text in ngDialog</p>
    • Define template templates within HTML, assign IDs to templates, assign IDs to template options, such as "Template: ' TemplateID '". And the template might be like this:<script type="text/ng-template" id="firstDialogId"><div><p>text in dialog</p></div></script>
    • Using external HTML fragments (files) as templates, such as "Template: ' servertpl.html '", the servertpl.html file is on the server.
Specify a Theme

The theme can be specified in the options via classname, and there are currently two themes for Ngdialog-theme-default and Ngdialog-theme-plain. These two notes correspond to two CSS files, which we have introduced through HTML.

Response Shutdown and other events

When the dialog box is closed, some events are emitted and the developer can listen to these events for notification. Specific events are:

    • ngdialog.opened
    • Ngdialog.closing
    • Ngdialog.closed

These events are defined in the$rootScopeService, so our controller constructor must rely on the$rootScope。 For example, our current module definition and controller definition:
Angular.module (' myApp ', [' Ngdialog ']).
Controller (' Mycontroller ', function ( c o p e Rootscope, Ngdialog) {

The module definition is marked with a dependent Ngdialog module, which injects and ngdialog in the controller definition $rootScope .

How to listen to events, see Ngdialog.js code it.

In addition, we can also set preclosecallback in the options and specify a function that will be called before the dialog box is canceled. Https://github.com/likeastore/ngDialog here are the instructions. Note that it is called when the dialog box is canceled, and if confirmed, it will not be transferred to OH. So, this preclosecallback usually block or remind the user to discard the input, such as user registration, input some information, want to back, you can ask if he really want to give up.

Specifies the Controller for the dialog box

You can assign a controller to a dialog box by using the options to set the Controllers property. This controller can be inline (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 property in the options when calling Ngdialog.open (options):

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

For a specific example, refer to: https://github.com/likeastore/ngDialog/blob/master/example/index.html.

Confirmation dialog box

For example, let the user confirm the deletion, let the user input. You can create such a dialog box using the Openconfirm (options). Ngdialog injected two functions into $scope, one is confirm (value) and one is closethisdialog (reason), which is used to confirm closing the dialog and cancel closing the dialog box. You can confirm and cancel the dialog box by associating them with the Confirm and Cancel buttons.

If I want to let the user enter the user name, you can use the Ng-model directive to bind a variable and input in the scope, in the call confirm when the bound variable, so you can get the user fill in the Confirm value to do further processing. The Openconfirmdialog button in our example pops up a dialog box that lets the user enter a name, and when the user enters the Confirm button, we can get the value of the User name input box by confirm method's value parameter.

Other articles:

    • Introduction to node. JS Development--Introducing Uibootstrap
    • Get started with node. JS-Transform Logindemo with MongoDB
    • node. JS Development Primer--mongodb and Mongoose
    • Get started with node. JS Development-Use cookies to stay signed in
    • Getting Started with node. JS-Using ANGULARJS built-in services
    • node. JS Development Primer--angular Simple Example
    • Introduction to node. JS Development-Using ANGULARJS
    • Getting Started with node. JS Development-Using the Jade template engine
    • node. JS Development Starter--express Routing and middleware
    • node. JS Development Primer--express Installation and use
    • node. JS Development Primer--http File Server
    • node. JS Development Primer--helloworld Re-analysis
    • Introduction to node. JS Development--Environment building and HelloWorld

Copyright NOTICE: This article is Foruok original article, without BO Master permission cannot reprint.

Get started with node. JS Development-Using dialog box Ngdialog

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.