CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
arth81
arth81

Reputation: 229

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

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.

Upvotes: 1

Views: 226

Answers (2)

Maxwelll
Maxwelll

Reputation: 2212

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.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

More recent versions changed $modal to $uibModal.

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

Upvotes: 1

Related Questions