Usman Iqbal Usman Iqbal - 2 months ago 18
AngularJS Question

Trying to show a modal popup but getting this error [$injector:unpr] in angularjs

Hi I am a newbie and I am learning angularjs. I am implementing a modal popup on click. But seems like there is an issue in dependency.

My index file

<body>
<div class="global-wrap">
<div class="container">
<div class="col-md-offset-3 col-md-6 col-md-offset-3 login">
<h1 class="align-cent">ShopOber</h1>
<div ng-controller="PosController">

<button ng-click="open()" class="btn btn-warning">Simple Popup</button>
</div>

</div>
</div>
</div>
</body>
</html>


my controller file

var posControllers = angular.module('posControllers', ['ui.bootstrap']);
posControllers.controller('PosController', ['$scope', '$http', '$routeParams', '$modal', function ($scope, $http, $routeParams, $modal) {

$scope.open = function () {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'popup.html',
});
};

}]);


and my app.js file

var myApp = angular.module('myApp', [
'ngRoute', // we are telling angular that we are using ngRouting feature that enables deeplinking first
'posControllers',

// we specify the JS that will handle this module
//'caControllers'
]);


Full error in console

"Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24uimodalProvider%20%3C-%20%24uimodal%20%3C-%20PosController
L/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:6:416
eb/q.$injector<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:40:307
d@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:38:308
eb/u.$injector<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:40:379
d@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:38:308
e@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:39:64
Xe/this.$get</</<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:80:149
K@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:61:140
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:326
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:349
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:349
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:349
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:349
g@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:54:349
V/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:53:388
yc/d/</<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:20:4
kf/this.$get</n.prototype.$eval@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:133:35
kf/this.$get</n.prototype.$apply@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:133:264
yc/d/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:19:477
e@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:39:94
yc/d@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:19:398
yc@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:20:179
Zd@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:19:1
@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:292:238
a@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:174:283
Hf/c@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js:35:124
"


I am following this tutorial
https://www.formget.com/angularjs-popup/
.The pop up does not show up although it code does and when i write display:block in console the pop up does come



My popup.html

<div class="modal-header">
<h3 class="modal-title">Header</h3>
</div>
<div class="modal-body">
Popup example with close button
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
ng-click="close()">Close</button>
</div>

Answer

Make sure you have referenced the library for angular-bootstrap

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>

also module should be like this,

var myApp = angular.module('myApp', [
     'ngRoute', 
    'posControllers',
    'caControllers',
     'ui.bootstrap'
]);

DEMO

Comments