Menu
I am able to open a model dialog using the following javascript code but with minified version, I am not able to open model dialog. I am getting back an error saying:
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
Here is the code with which I am able to open 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>
Then I minified appscript.js using the steps given in the URL below: http://chrislarson.me/blog/how-minify-angularjs-scripts
Here is my minified appscript.min.js:
var dialogexample=angular.module("dialogexample",["ngRoute","ui.bootstrap"]);dialogexample.config(["$routeProvider",function(a){a.when("/dialogpage",{templateUrl:"dialogpage.html",controller:"dialogController"}).otherwise({redirectTo:"/dialogpage"})}]);
dialogexample.controller("dialogController",["$scope","$location","$modal","$rootScope",function(a,e,c,f){function d(){c.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(a,b){a.ok=function(){b.close()};a.cancel=function(){b.dismiss("cancel")}}})}
a.openDialog=function(){d()}}]);
After adding this script to HTML file, I was not able to open model dialog. Please let me know how can I show the model dialog using minified javascript.
Any help is appreciated.
537
you also have to correctly inject parameters passed into $modal controller
let's say
ctrl.$inject = ['$scope', '$modalInstance'];
ctrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$modal.open({
template: ...,
controller: ctrl
});
edit: syntax mistakes
66
Variable names get shortened when minifing so the dependency injector cannot work correctly.
Read the note on minification: http://docs.angularjs.org/tutorial/step_05
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
