2014-12-13 99 views
19

我想用ngAnimate做一些動畫,但我甚至無法開始使用它。問題是,當我嘗試將ngAnimate依賴項添加到應用程序文件時,它會在控制檯中引發此錯誤,並且我的應用程序無法正常工作。Angular ngAnimate拋出錯誤

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 

但沒有添加ngAnimate依賴關係,它工作正常。不知道我在這裏做錯了什麼。

這是我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' 
     }); 
}); 

這裏是我的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> 

這是我的控制器

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); 
    }; 
}) 

在此先感謝。

+1

您是否調用angular-animate.js文件? – hakazvaka 2014-12-13 18:04:58

+0

是的,我確實。在我的HTML。 – 2014-12-13 18:08:56

+0

查看index.html中的鏈接,如果文件實際重定向,則在控制檯中直接點擊打開。也許壞鏈接。 – syarul 2014-12-13 18:11:50

回答

28

解決!

將我的角度版本更新爲等於角度動畫版本修復問題的角度版本。

+0

那麼它就像'bower update'一樣簡單? – Rick 2015-05-26 21:35:33

+0

是的!我做了兩個相同的版本,它的工作。 – 2015-11-01 05:56:25