ホームページ > 記事 > ウェブフロントエンド > Node.jsダイアログボックスngDialogの使い方

Node.jsダイアログボックスngDialogの使い方

php中世界最好的语言オリジナル: 2018-05-30 11:37:171355ブラウズ

今回は、Node.jsのダイアログボックスngDialogの使い方と、ダイアログボックスngDialogを使用してNode.jsを操作する際の注意点について説明します。実際の事例を見てみましょう。 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/

javascript

s の下に配置されます。 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 のファイルの名前を変更しました。名前が変更されたファイルは次のとおりです:

APIの概要学習

学習中にいくつかの疑問に遭遇したので、以下に記録します。

ダイアログコンテンツテンプレートダイアログボックスを表示するには、表示するコンテンツを指定する必要があります。これは、テンプレート属性によって指定されます。テンプレートには 3 つの状況があります:

Text in ngDialog