検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Node.js でダイアログ ボックス ngDialog を実装する手順の詳細な説明

Node.js でダイアログ ボックス ngDialog を実装する手順の詳細な説明

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-22 10:45:591810ブラウズ

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

  1. ngDialog-0.4.0.min.js

  2. ngDialog-0.4.0.min.css

  3. ngDialog-theme-default-0.4.0.min .css

  4. ngDialog-theme-plain-0.4.0.min.css

APIの概要学習

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

ダイアログコンテンツテンプレート

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

  1. js または html コードに埋め込まれたプレーン テキスト テンプレート このとき、オプションで plain 属性を同時に true、つまり "plain:true" に設定する必要があります。次に、HTML コードの一部をテンプレートに直接割り当てます。たとえば、template:

    Text in ngDialog

  2. HTML でテンプレートを定義し、テンプレートに ID を指定して割り当てます。テンプレート オプションの ID (「template: 'templateId'」など)。テンプレートは次のようになります: