2014-12-13 19 views
19

Ich versuche, einige Animationen mit ngAnimate zu machen, aber ich kann nicht einmal damit anfangen. Das Problem ist, wenn ich versuche, meine ngAnimate-Abhängigkeit der App-Datei hinzuzufügen, wirft es mir diesen Fehler in der Konsole und meine App funktioniert nicht.Angular ngAnimate wirft Fehler

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 

Aber ohne die ngAnimate-Abhängigkeit hinzuzufügen, funktioniert es gut. Nicht sicher, was ich hier falsch mache.

Das ist mein 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' 
     }); 
}); 

Hier ist mein 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> 

Und das ist mein 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); 
    }; 
}) 

Vielen Dank im Voraus.

+1

Haben Sie die angular-animate.js-Datei aufgerufen? – hakazvaka

+0

Ja sicher, dass ich es tat. In meinem HTML. –

+0

Überprüfen Sie den Link in Ihrer index.html, öffnen Sie in der Konsole klicken Sie direkt, wenn die Datei tatsächlich umleiten oder nicht. vielleicht schlechte Links. – syarul

Antwort

28

Gelöst !!

Die Aktualisierung meiner eckigen Version auf eine Version, die der eckigen animierten Version entspricht, behob das Problem.

+0

Also war es so einfach wie 'bower update'? – Rick

+0

Ja war es! Ich habe die gleiche Version gemacht und es hat funktioniert. –