Menu
I'm trying to do some animations with ngAnimate but I cannot even get started with it. The problem is when i try to add my ngAnimate dependency to the app file it throws me this error in console and my app is not working.
Uncaught Error: [$injector:unpr] Unknown provider: $$jqLiteProvider <- $$jqLite <- $animate <- $compile
http://errors.angularjs.org/1.3.5/$injector/unpr?p0=%24%24jqLiteProvider%20%3C-%20%24%24jqLite%20%3C-%20%24animate%20%3C-%20%24compileangular.js:63 (anonymous function)angular.js:3950 (anonymous function)angular.js:4097 getServiceangular.js:3955 (anonymous function)angular.js:4097 getServiceangular.js:4129 invokeangular.js:4025 origProvider.$getangular.js:4138 invokeangular.js:3956 (anonymous function)angular.js:4097 getServiceangular.js:4129 invokeangular.js:3956 (anonymous function)angular.js:4097 getServiceangular.js:4129 invokeangular.js:1435 doBootstrapangular.js:1455 bootstrapangular.js:1349 angularInitangular.js:25912 (anonymous function)angular.js:2722 triggerangular.js:2992 eventHandler
But without adding the ngAnimate dependency it's working fine. Not sure what i'm doing wrong here.
This is my app.js
var app = angular.module('myApp', ['ngRoute','ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'homeCtrl',
templateUrl: '/partials/home.html'
})
.when('/register', {
controller: 'regCtrl',
templateUrl: '/partials/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: '/partials/login.html'
}).when('/', {
redirectTo: '/home'
}).otherwise({
redirectTo: '/register'
});
});
Here is my html
<!DOCTYPE html>
<html>
<head>
<title>Angular Tutorial</title>
</head>
<body ng-app='myApp'>
<div class="container">
<header>
<h1>Logo</h1>
<a href="#/home">Home</a>
<a href="#/register">Register</a>
<a href="#/login">Login</a>
</header>
<ng-view></ng-view>
</div>
<!-- Vendor libraries -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<!-- App libraries -->
<script src="app/app.js"></script>
<script src="app/controllers/controllers.js"></script>
</body>
</html>
And this is my controller
app.controller('homeCtrl', function($scope) {
$scope.message = "Home page"
});
app.controller('regCtrl', function($scope) {
$scope.message = "Registration message";
$scope.register = function() {
alert($scope.fname + "\n" + $scope.lname + "\n" + $scope.email + "\n" + $scope.password);
};
})
app.controller('loginCtrl', function($scope) {
$scope.message = "Login message";
$scope.login = function() {
alert($scope.myemail + "\n" + $scope.password);
};
})
Thanks in advance.
378
Solved !!
Updating my angular version to one that equals the angular animate version fixed the issue.
167
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
