I have successfully created a model dialog using the following JavaScript code, but when I minify the script, I encounter an error preventing the model dialog from opening. The error message states:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.11/$injector/unpr?p0=aProvider%20%3C-%20a
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:78:12
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3543:19
at Object.getService [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3670:39)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3548:45
at getService (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3670:39)
at invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3697:13)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3718:23)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:6777:28)
at resolveSuccess (http://localhost:8080/SampleTest/ui-bootstrap-tpls-0.10.0.js:1710:32)
at deferred.promise.then.wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:10949:81) angular.js:9419
Below is the code that successfully opens the model dialog:
HTML:
<!DOCTYPE html>
<html ng-app="dialogexample">
<head>
<title>Dialog Test</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div ng-view=""></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-resource.min.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.js"></script>
<script type="text/javascript" src="appscript.js"></script>
</body>
</html>
appscript.js:
var dialogexample = angular.module('dialogexample', ['ngRoute', 'ui.bootstrap']);
dialogexample.config(function($routeProvider) {
$routeProvider
.when('/dialogpage', {
templateUrl: "dialogpage.html",
controller: 'dialogController'
})
.otherwise({ redirectTo: '/dialogpage' });
});
dialogexample.controller('dialogController', function ($scope, $location, $modal, $rootScope) {
$scope.openDialog = function() {
showDialog();
};
function showDialog() {
$modal.open({
template: '<div>'+
'<div class="modal-header">' +
'<h3>Dialog</h3>'+
'</div>'+
'<div class="modal-body">'+
'<p>'+
'Dialog Opened'+
'</p>'+
'</div>'+
'<div class=\"modal-footer\">'+
'<button class="btn btn-primary" ng-click="ok()">OK</button>'+
'<button class="btn btn-warning" ng-click="cancel()" ng-hide="hidecancel">Cancel</button>'+
'</div>'+
'</div>',
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
});
dialogpage.html
<div class="partialviewpage">
<button ng-click="openDialog()">Show Dialog</button>
</div>
After minifying appscript.js using the steps provided in this tutorial, the resulting minified appscript.min.js file caused the model dialog to fail to open. I would appreciate any guidance on how to solve this issue and successfully display the model dialog with the minified JavaScript.
Thank you for your help.