Node.js でダイアログボックス ngDialog を実装する手順の詳細な説明-jsチュートリアル-php.cn

今回は、Node.js でダイアログボックス ngDialog を使用する実装手順について詳しく説明します。Node.js でダイアログボックス ngDialog を使用する場合の注意点は何ですか。実際の事例を見てみましょう。。

Web サイトを構築するとき、ユーザー入力を取得するためのダイアログボックスが表示されたり、ユーザーに操作の確認を求めるダイアログボックスが表示されたりする状況によく遭遇します。そのようなことを実現するのに役立つ AngularJS ベースの拡張モジュールがあります。物事をエレガントに：ngDialog。

ngDialog は、さまざまな使用法を示すサンプル Web ページを github で提供しています (https://github.com/likeastore/ngDialog/blob/master/example/index.html)。 ngDialog の github ホームページの readme には、一般的に使用される手順とサービスの詳細な紹介も記載されており、参照することができます。私の記事は純粋に ngDialog の例に基づいています。

ngDialog.open(options) または ngDialog.openconfirm(options) を使用してダイアログボックスを作成します。前者は通常のダイアログボックスを開き、テーマやテンプレートなどの一連の属性はオプションで指定できます。後者はデフォルトでエスケープを拒否してダイアログボックスの外で自動的に閉じるダイアログボックスを開きます。 options は、次のような json オブジェクトです:

{template: 'tplId',closeByEscape: false}

ログイン後にコピー

構築例

まず簡単な例を見てみましょう。 Express Generator を使用して新しいアプリケーションを作成するか、「Node.js 開発入門 - ログインを維持するための Cookie の使用」の LoginDemo サンプルを直接使用します。すべてが完了しました。

作成したファイルを追加します

作成した 3 つのファイルがあります。ngdialog.html ファイルとserverTpl.html ファイルはプロジェクトの public ディレクトリに配置され、ngdialog.js は public/javascripts の下に配置されます。

ngdialog.html コンテンツ:

<!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 コンテンツ:

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 コンテンツ:

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

ログイン後にコピー

ngDialog の紹介

ngDialog を使用するには、HTML でスクリプトを使用して、対応する js を導入する必要がありますライブラリファイル。さらに、head 部分にいくつかの css ファイルを導入する必要があります。 ngdialog.html を参照してください。

ngDialog ライブラリファイルは、https://github.com/likeastore/ngDialog からダウンロードするか、ここからダウンロードできます: http://cdnjs.com/libraries/ng-dialog。以下のリンクにあるバージョン 0.4.0 のファイルの名前を変更しました。名前が変更されたファイルは次のとおりです: