使用requirejs时ngAnimate无法正常工作

时间:2014-04-23 11:40:51

标签: javascript angularjs requirejs

我的main.js文件中有以下代码:

require.config({

paths: {
    'angular': 'libs/angular/angular',
    'angular-route': 'libs/angular-route/angular-route',
    'angular-resource':'libs/angular-resource/angular-resource', 
    'angular-animate':'libs/angular-animate/angular-animate.min',       
    'domReady': 'libs/requirejs-domready/domReady',
    'jquery':'libs/jquery/jquery-1.11.0.min',
    'calendar':'libs/calendar/calendar',
    'blockUI':'libs/blockUI/jquery.blockUI',
    'modernizr':'libs/modernizr-2.6.2.min',
    'calendario':'libs/jquery.calendario',
    'respond':'libs/respond.min',        
    'pushy':'libs/pushy/pushy',
    'html5shiv':'libs/html5shiv',
    'custom':'libs/custom',
    'toastr':'libs/toastr/toastr.min',
    'picker':'libs/pickadate/lib/picker',
    'pickadate':'libs/pickadate/lib/picker.date',

},

/**
 * for libs that either do not support AMD out of the box, or
 * require some fine tuning to dependency mgt'
 */
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: ['angular']
    },
    'angular-resource':{
        deps:['angular']

    },
    'angular-animate':{
        deps:['angular']
    },
    'blockui': ["jquery"],
    'pushy':{
        deps:['jquery','modernizr'],           
    },
    'custom':{
        deps:['jquery']
    },
    'calendario':{
        deps:['jquery']
    },
    'picker':{
        deps:['jquery']
    },
    'pickerdate':{
        deps:['jquery']
    },
    'toastr':{
        deps:['jquery']
    }
},
catchError: {
    define: true
},
waitSeconds:1,

deps: [
    // kick start application... see bootstrap.js
    './bootstrap'
]
 });

在我的bootstap.js文件中,我有以下代码

 require([
    'require',
    'angular',  
    'angular-animate',  
    'jquery',        
    'picker', 
    'pickadate',          
    'app',
    'routes'
 ], function (require,ng,ngAnimate,$,picker,pickadate) {
    'use strict';

    /*
     * place operations that need to initialize prior to app start here
     * using the `run` function on the top-level module
     */

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});
app.js文件中的

我有以下代码:

 define([
    'angular',    
    'angular-route',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
 ], function (angular) {
    'use strict';

    return angular.module('app', [
        'app.controllers',
        'app.directives',
        'app.filters',
        'app.services',       
        'ngRoute',        
        'ngResource',
        'ngAnimate'
    ]);
});

它会抛出以下错误:

  

未捕获错误:[$ injector:unpr]未知提供商:   $$ asyncCallbackProvider         < - $$ asyncCallback< - $ animate< - $ compile           http://errors.angularjs.org/1.2.3/ $注射器/ unpr?P0 =%24%24asyncCallbackProvider%20%3 C-%20%24%24asyncCallback%20%3 C-%20%24animate%2 ......文件

1 个答案:

答案 0 :(得分:3)

解决方案可能就像升级到最新版本的AngularJS一样简单,因为这个人发现从1.2.6到1.2.15有类似的问题。

Angular-animate - Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

在撰写本文时,您将从1.2.3升级到1.2.18

我认为问题是由链接底部的Paul Webber解释的,他说ngAnimate和AngularJS的版本不同步,因此建议使用两个库的最高稳定版本