I want to run this demo:
https://material.angularjs.org/latest/demo/dialog
But there is blank page when I run this in the browser
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<style>
.dialogdemoBasicUsage #popupContainer {
position: relative; }
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px; }
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px; }
.dialogdemoBasicUsage button {
width: 200px; }
.dialogdemoBasicUsage div#status {
color: #c60008; }
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
margin-bottom: 0; }
</style>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('dialogDemo1', ['ngMaterial']).controller('AppCtrl', function($scope, $mdDialog) {
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAlert = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
// Modal dialogs should fully cover application
// to prevent interaction outside of dialog
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Would you like to delete your debt?')
.textContent('All of the banks have agreed to forgive you your debts.')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please do it!')
.cancel('Sounds like a scam');
$mdDialog.show(confirm).then(function() {
$scope.status = 'You decided to get rid of your debt.';
}, function() {
$scope.status = 'You decided to keep your debt.';
});
};
$scope.showPrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
.title('What would you name your dog?')
.textContent('Bowser is a common name.')
.placeholder('Dog name')
.ariaLabel('Dog name')
.initialValue('Buddy')
.targetEvent(ev)
.ok('Okay!')
.cancel('I\'m a cat person');
$mdDialog.show(confirm).then(function(result) {
$scope.status = 'You decided to name your dog ' + result + '.';
}, function() {
$scope.status = 'You didn\'t name your dog.';
});
};
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showPrerenderedDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
contentElement: '#myDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
</script>
</head>
<body>
<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
<p class="inset">
Open a dialog over the app's content. Press escape or click outside to close the dialog and
send focus back to the triggering button.
</p>
<div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
<md-button class="md-primary md-raised" ng-click="showAlert($event)" >
Alert Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
Confirm Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showPrompt($event)" >
Prompt Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" >
Tab Dialog
</md-button>
<md-button class="md-primary md-raised" ng-if="listPrerenderedButton" ng-click="showPrerenderedDialog($event)">
Pre-Rendered Dialog
</md-button>
</div>
<p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
<div ng-if="status" id="status">
<b layout="row" layout-align="center center" class="md-padding">
{{status}}
</b>
</div>
<div class="dialog-demo-prerendered">
<md-checkbox ng-model="listPrerenderedButton">Show Pre-Rendered Dialog</md-checkbox>
<p class="md-caption">Sometimes you may not want to compile the dialogs template on each opening.</p>
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen custom dialog">Use full screen mode for custom dialog</md-checkbox>
<p class="md-caption">Allows the dialog to consume all available space on small devices</p>
</div>
<div style="visibility: hidden">
<div class="md-dialog-container" id="myDialog">
<md-dialog layout-padding>
<h2>Pre-Rendered Dialog</h2>
<p>
This is a pre-rendered dialog, which means that <code>$mdDialog</code> doesn't compile its
template on each opening.
<br/><br/>
The Dialog Element is a static element in the DOM, which is just visually hidden.<br/>
Once the dialog opens, we just fetch the element from the DOM into our dialog and upon close
we restore the element back into its old DOM position.
</p>
</md-dialog>
</div>
</div>
</div>
</body>
</html>
Does anyone know what the problem is?
Below is the working code. Two changes I've made are
Included the
ng-apptag on body to bootstrapIncluded the angular material cdn
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<style>
.dialogdemoBasicUsage #popupContainer {
position: relative; }
.dialogdemoBasicUsage .footer {
width: 100%;
text-align: center;
margin-left: 20px; }
.dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {
font-size: 0.8em;
margin-top: 50px; }
.dialogdemoBasicUsage button {
width: 200px; }
.dialogdemoBasicUsage div#status {
color: #c60008; }
.dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {
margin-bottom: 0; }
</style>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<!-- Your application bootstrap -->
</head>
<body ng-app="dialogDemo">
<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
<p class="inset">
Open a dialog over the app's content. Press escape or click outside to close the dialog and
send focus back to the triggering button.
</p>
<div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
<md-button class="md-primary md-raised" ng-click="showAlert($event)" >
Alert Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showConfirm($event)" >
Confirm Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showPrompt($event)" >
Prompt Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)" >
Tab Dialog
</md-button>
<md-button class="md-primary md-raised" ng-if="listPrerenderedButton" ng-click="showPrerenderedDialog($event)">
Pre-Rendered Dialog
</md-button>
</div>
<p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
<div ng-if="status" id="status">
<b layout="row" layout-align="center center" class="md-padding">
{{status}}
</b>
</div>
<div class="dialog-demo-prerendered">
<md-checkbox ng-model="listPrerenderedButton">Show Pre-Rendered Dialog</md-checkbox>
<p class="md-caption">Sometimes you may not want to compile the dialogs template on each opening.</p>
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen custom dialog">Use full screen mode for custom dialog</md-checkbox>
<p class="md-caption">Allows the dialog to consume all available space on small devices</p>
</div>
<div style="visibility: hidden">
<div class="md-dialog-container" id="myDialog">
<md-dialog layout-padding>
<h2>Pre-Rendered Dialog</h2>
<p>
This is a pre-rendered dialog, which means that <code>$mdDialog</code> doesn't compile its
template on each opening.
<br/><br/>
The Dialog Element is a static element in the DOM, which is just visually hidden.<br/>
Once the dialog opens, we just fetch the element from the DOM into our dialog and upon close
we restore the element back into its old DOM position.
</p>
</md-dialog>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('dialogDemo', ['ngMaterial']).controller('AppCtrl', function($scope, $mdDialog) {
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAlert = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
// Modal dialogs should fully cover application
// to prevent interaction outside of dialog
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Would you like to delete your debt?')
.textContent('All of the banks have agreed to forgive you your debts.')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please do it!')
.cancel('Sounds like a scam');
$mdDialog.show(confirm).then(function() {
$scope.status = 'You decided to get rid of your debt.';
}, function() {
$scope.status = 'You decided to keep your debt.';
});
};
$scope.showPrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
.title('What would you name your dog?')
.textContent('Bowser is a common name.')
.placeholder('Dog name')
.ariaLabel('Dog name')
.initialValue('Buddy')
.targetEvent(ev)
.ok('Okay!')
.cancel('I\'m a cat person');
$mdDialog.show(confirm).then(function(result) {
$scope.status = 'You decided to name your dog ' + result + '.';
}, function() {
$scope.status = 'You didn\'t name your dog.';
});
};
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
$scope.showPrerenderedDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
contentElement: '#myDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
</script>
</html>