角度ポップアップウィンドウを作成しようとしています

Question

角度アプリケーションでポップアップウィンドウを作成しようとしています。私は窓を作るためにthis linkを参照しています。

私は私のabc.htmlにちょうどボタンを追加しました：

<button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button> 

私も自分のCSSへのリンクに記載されたスタイルを追加しました。 App.jsファイル：

var myApp = angular.module('myApp',[ 
    'ui.router', 
    'ui.bootstrap', 
    'validation', 
    'validation.rule', 
    'users', 
    'dashboard', 
    'reports', 
    'employees', 
    'reservations', 
    'employeeTalentPool', 
    'ui.bootstrap', 
    'dialogs' 
]); 

abc.js：

myApp.controller('dialogServiceTest', function ($scope, $rootScope, $timeout, $dialogs) { 
    $scope.confirmed = 'You have yet to be confirmed!'; 
    $scope.name = '"Your name here."'; 

    $scope.launch = function (which) { 
     var dlg = null; 
     switch (which) { 

      // Error Dialog 
      case 'error': 
       dlg = $dialogs.error('This is my error message'); 
       break; 

       // Wait/Progress Dialog 
      case 'wait': 
       dlg = $dialogs.wait(msgs[i++], progress); 
       fakeProgress(); 
       break; 

       // Notify Dialog 
      case 'notify': 
       dlg = $dialogs.notify('Something Happened!', 'Something happened that I need to tell you.'); 
       break; 

       // Confirm Dialog 
      case 'confirm': 
       dlg = $dialogs.confirm('Please Confirm', 'Is this awesome or what?'); 
       dlg.result.then(function (btn) { 
        $scope.confirmed = 'You thought this quite awesome!'; 
       }, function (btn) { 
        $scope.confirmed = 'Shame on you for not thinking this is awesome!'; 
       }); 
       break; 

       // Create Your Own Dialog 
      case 'create': 
       dlg = $dialogs.create('/dialogs/whatsyourname.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' }); 
       dlg.result.then(function (name) { 
        $scope.name = name; 
       }, function() { 
        $scope.name = 'You decided not to enter in your name, that makes me sad.'; 
       }); 

       break; 
     }; // end switch 
    }; // end launch 

    // for faking the progress bar in the wait dialog 
    var progress = 25; 
    var msgs = [ 
     'Hey! I\'m waiting here...', 
     'About half way done...', 
     'Almost there?', 
     'Woo Hoo! I made it!' 
    ]; 
    var i = 0; 

    var fakeProgress = function() { 
     $timeout(function() { 
      if (progress < 100) { 
       progress += 25; 
       $rootScope.$broadcast('dialogs.wait.progress', { msg: msgs[i++], 'progress': progress }); 
       fakeProgress(); 
      } else { 
       $rootScope.$broadcast('dialogs.wait.complete'); 
      } 
     }, 1000); 
    }; // end fakeProgress 

}) // end dialogsServiceTest 
.controller('whatsYourNameCtrl', function ($scope, $modalInstance, data) { 
    $scope.user = { name: '' }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('canceled'); 
    }; // end cancel 

    $scope.save = function() { 
     $modalInstance.close($scope.user.name); 
    }; // end save 

    $scope.hitEnter = function (evt) { 
     if (angular.equals(evt.keyCode, 13) && !(angular.equals($scope.name, null) || angular.equals($scope.name, ''))) 
      $scope.save(); 
    }; // end hitEnter 
}) // end whatsYourNameCtrl 
.run(['$templateCache', function ($templateCache) { 
    $templateCache.put('/dialogs/whatsyourname.html', '<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>'); 
}]); // end run/module 

Imがエラーを取得して、アプリケーションを実行中：

angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to: 
Error: [$injector:unpr] Unknown provider: $animateProvider 
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=%24animateProvider 
    at http://localhost:51703/bower_components/angular/angular.js:78:12 
    at http://localhost:51703/bower_components/angular/angular.js:3802:19 
    at getService (http://localhost:51703/bower_components/angular/angular.js:3930:39) 
    at invoke (http://localhost:51703/bower_components/angular/angular.js:3957:13) 
    at Object.instantiate (http://localhost:51703/bower_components/angular/angular.js:3977:23) 
    at provider (http://localhost:51703/bower_components/angular/angular.js:3833:36) 
    at Object.provider (http://localhost:51703/bower_components/angular/angular.js:3825:16) 
    at http://localhost:51703/bower_components/angular/angular.js:3885:37 
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18) 
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5) 
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ngAnimate&p1=Error…F%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A5) 
    at http://localhost:51703/bower_components/angular/angular.js:78:12 
    at http://localhost:51703/bower_components/angular/angular.js:3906:15 
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18) 
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5) 
    at http://localhost:51703/bower_components/angular/angular.js:3879:40 
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18) 
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5) 
    at createInjector (http://localhost:51703/bower_components/angular/angular.js:3812:11) 
    at doBootstrap (http://localhost:51703/bower_components/angular/angular.js:1444:20) 
    at bootstrap (http://localhost:51703/bower_components/angular/angular.js:1459:12) 
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=Error%3A%…%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A12)(anonymous function) @ angular.js:78(anonymous function) @ angular.js:3906forEach @ angular.js:325loadModules @ angular.js:3872createInjector @ angular.js:3812doBootstrap @ angular.js:1444bootstrap @ angular.js:1459angularInit @ angular.js:1368(anonymous function) @ angular.js:22019j @ jquery-1.11.0.js:2fireWith @ jquery-1.11.0.js:2ready @ jquery-1.11.0.js:2K @ jquery-1.11.0.js:2 

はその後、私はと異なり、わずかコントローラを追加しました

私は初心者で、どのように動作するのかよくわかりません。誰でもこの問題を解決するための解決策を教えてくれますか？

Answer 1

あなたはngAnimate必要 - あなたのアプリケーションへの依存性として一度インストールhttps://docs.angularjs.org/api/ngAnimate

、それように：

angular.module('myApp', ['other deps...','ngAnimate']); 

Answer 2

例：

ngDialog.open({ 
    template: 'templateId', 
    className: 'ngdialog-theme-default' 
}); 

が、あなたのコードごとに、あなたが探しています通知メッセージを表示するためのダイアログ。 参考資料ngDialog

Answer 3

多分これらを試すことができます。

https://material.angularjs.org/latest/demo/dialog