Angular Error: [$injector:unpr] while adding ui.bootstrap

Question

I've built simple angular page but after addition of ui.bootstrap to the dependencies I got an error:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20HomeController

Here is reference part of the index.html file:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/DataService.js"></script>

and this is my application js:

var angularFormsApp = angular.module('angularFormsApp',['ngRoute','ui.bootstrap']);
angularFormsApp.config(function($routeProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "app/Home.html",
            controller: "HomeController"
        }).when("/newEmployeeForm", {
            templateUrl: "app/EmployeeForm/efTemplate.html",
            controller: "efController"
        }).when("/updateEmployeeForm/:id", {
            templateUrl: "app/EmployeeForm/efTemplate.html",
            controller: "efController"
        }).otherwise({
                redirectTo:"/home"
        });
});

angularFormsApp.controller("HomeController",
function ($scope, $location, $modal,DataService) {
    $scope.showCreateEmployeeForm = function () {
          $location.path('/newEmployeeForm');
        $modal.open(
        {
            templateUrl: 'app/EmployeeForm/efTemplate.html',
            controller: 'efController'
        });
    };
    $scope.showUpdateEmployeeForm = function (id) {
        $location.path('/updateEmployeeForm/'+id);
    };
});

Any ideas what did I wrong? Whitout ui.bootstrap reference the page runs well.

charlietfl · Accepted Answer · 2016-01-29 19:15:55Z

1

More recent versions changed $modal to $uibModal.

Same ui prefix was added to a number of the services. See docs examples

answered Jan 29, 2016 at 19:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxwelll · Accepted Answer · 2016-01-29 19:23:49Z

1

To utilize the full power of UIB include the ng-animate script and inject it into your module. This will add animation to your modal.

edited Jan 29, 2016 at 19:23

answered Jan 29, 2016 at 19:21

Maxwelll

2,2121 gold badge19 silver badges22 bronze badges

1 Comment

charlietfl Over a year ago

not true ... tmpls version includes both. You are misinterpreting the docs

Collectives™ on Stack Overflow

Angular Error: [$injector:unpr] while adding ui.bootstrap

2 Answers 2

Comments

1 Comment

Your Answer

Collectives™ on Stack Overflow

Angular Error: [$injector:unpr] while adding ui.bootstrap

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest