Trying to create an Angular Popup window

Question

I am trying to make a pop up window in my Angular application. I am referring this link to make the window.

I added just the button to my abc.html :

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

I also added the styles mentioned in the link to my CSS. Then, I added the controller slight differently as : App.js file :

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

While running the app, Im getting error :

    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

I am a beginner and not sure how it works. Can anyone help me out with a solution to fix this?

try this: \http://stackoverflow.com/questions/19871796/angularjs-error-unknown-provider-animateprovider-animate — bob, Sep 26 '16 at 10:31

mindparse · Answer 1 · 2016-09-26T10:32:09.700

0

You need ngAnimate - https://docs.angularjs.org/api/ngAnimate

Once installed, as it as dependency to your application:

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

edited Sep 26 '16 at 10:32

answered Sep 26 '16 at 10:14

mindparse

6,115
27
90
191

I added the "" to index.html Also added ngAnimate to module. I reffered the doc, but I have no clue how to install the NPM – Phoenix Sep 26 '16 at 10:31
Can you please direct me how to install it ? – Phoenix Sep 26 '16 at 10:31
Well how have you installed your other dependencies, so the core angular library for example? Are you using script includes (tags) for each library? What version of angularJS are using also? – mindparse Sep 26 '16 at 10:34
I downloaded an angular app and Im just messing with stuff to learn. I don't remember installing dependencies manually. Im using AngularJS v1.2.25 – Phoenix Sep 26 '16 at 10:39
I added the angular-animate.js file to the project and referred it to my html. Is there more to be done? – Phoenix Sep 26 '16 at 10:52
I have reading this, your error refers, as mindparse says, you should refer to ngAnimate as a module reference, did you add?: angular.module('myApp', ['other deps...','ngAnimate']); and you have the same angular error? – Kalamarico Sep 27 '16 at 08:41

Snopzer · Answer 2 · 2016-09-26T11:03:24.747

0

Example :

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

but as per your code, you are looking for Dialog to show Notification Messages. Refer Document ngDialog

edited Sep 26 '16 at 11:03

answered Sep 26 '16 at 10:53

Snopzer

1,602
19
31

I am not trying to show notifications. I am going to add a form to the popped up window later. – Phoenix Sep 26 '16 at 10:55
I didn't want to proceed with creating the form at this point as I was getting error. So just used the data provided in the link I was referring to. – Phoenix Sep 26 '16 at 10:56
Yes, i got the same Requirement, I used ngDialog, its Pretty Simple. – Snopzer Sep 26 '16 at 11:02

score 0 · Answer 3 · answered Sep 26 '16 at 11:21

0

Maybe you can experiment with these.

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

answered Sep 26 '16 at 11:21

itdoesntwork

1,745
16
31

Trying to create an Angular Popup window

3 Answers3