2016-05-16 13 views
0

jQueryプラグインとmain.jsを持つHTMLテンプレート(themeforestから)があります。これらのテンプレートはすべてインスタンス化され、テンプレート用に構成されています。そのテンプレートに基づいてAngularJSアプリケーションを作成しています。スクリプトをロードするためにRequireJSを使用しています。テンプレートのindex.htmlに、require-config.jsファイルを読み込みます。時間の80%、アプリケーションは正常に読み込まれますが、残りの20%は "jQueryは関数ではありません"または "$(...)。mmenuは関数ではありません"のようなエラーが表示されます。ここに私のファイルがあります。誰かが私が間違っていることを理解できますか?RequireJsがランダムにスクリプトを読み込めません

<script type="text/javascript" src="js/jquery-lib.js"></script><!-- Jquery Library --> 
    <script type="text/javascript" src="js/jquery-migrate-1.3.0.min.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src='js/mapbox.js'></script> 
    <script type="text/javascript" src='js/leaflet.markercluster.js'></script> 
    <script type="text/javascript" src="js/build.min.js"></script> 
    <script type="text/javascript" src="lib/chosen/chosen.jquery.js" ></script> 
    <script type="text/javascript" src="js/jquery-ui.js"></script> 
    <script type="text/javascript" src="lib/slick/slick.min.js"></script> 
    <script type="text/javascript" src="lib/jquerym.menu/js/jquery.mmenu.min.all.js"></script> 
    <script type="text/javascript" src="lib/Magnific-Popup-master/jquery.magnific-popup.min.js"></script> 
    <script type="text/javascript" src="lib/jQuery.filer-master/js/jquery.filer.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap-rating.js"></script> 
    <script type="text/javascript" src="lib/popup/js/classie.js"></script> <!-- Popup --> 
    <script type="text/javascript" src="lib/popup/js/modalEffects.js"></script> <!-- Popup --> 
    <script type="text/javascript" src="js/main.js"></script> 

ここで、最後はすべてが初期化されるmain.jsです。だから今、私のindex.htmlに私はこれを持っている:

<script data-main="require-config" src="bower_components/requirejs/require.js"></script> 

は-confing.jsを必要とマイこの

require.config({ 
paths: { 
    jquery: 'js/jquery-lib', 
    jquerymigrate: 'js/jquery-migrate-1.3.0.min', 
    rating: 'js/bootstrap-rating', 
    build: 'js/build.min', 
    mapbox: 'js/mapbox', 
    leaflet: 'js/leaflet.markercluster', 
    chosen: 'lib/chosen/chosen.jquery', 
    jqueryui: 'js/jquery-ui', 
    slick: 'lib/slick/slick.min', 
    jquerymenu: 'lib/jquerym.menu/js/jquery.mmenu.min.all', 
    magnific: 'lib/Magnific-Popup-master/jquery.magnific-popup.min', 
    fileLoader: 'lib/jQuery.filer-master/js/jquery.filer.min', 
    main: 'js/main', 
    angular: 'bower_components/angular/angular', 
    angularRoute: 'bower_components/angular-route/angular-route', 
    angularMocks: 'bower_components/angular-mocks/angular-mocks', 
    angularTranslate: 'bower_components/angular-translate/angular-translate', 
    angularTranslateLoadProvider: 'bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files', 
    text: 'bower_components/requirejs-text/text' 
}, 
shim: { 
    'jquery': { 
     'exports': 'jquery' 
    }, 
    'jquerymigrate': { 
     deps: ['jquery'] 
    }, 
    'build': { 
     deps: ['jquery'] 
    }, 
    'mapbox': { 
     deps: ['jquery'] 
    }, 
    'leaflet': { 
     deps: ['jquery', 'jquerymigrate'] 
    }, 
    'chosen': { 
     deps: ['jquery'] 
    }, 
    'jqueryui': { 
     deps: ['jquery'] 
    }, 
    'slick': { 
     deps: ['jquery', 'jqueryui'] 
    }, 
    'fileLoader': { 
     deps: ['jquery'] 
    }, 
    'js/bootstrap-rating': { 
     deps: ['jquery'], 
     'exports': 'rating' 
    }, 
    'jquerymenu': { 
     deps: ['jquery'], 
     'exports': 'jquerymenu' 
    }, 
    'magnific': { 
     deps: ['jquery'] 
    }, 
    'main': { 
     deps: ['jquery', 'jqueryui', 'build', 'mapbox', 'chosen', 'fileLoader', 'rating', 'jquerymenu', 'slick', 'magnific'] 
    }, 
    'angular': { 'exports': 'angular' }, 
    'angularRoute': ['angular'], 
    'angularTranslate': ['angular'], 
    'angularTranslateLoadProvider': ['angularTranslate'], 
    'angularMocks': { 
     deps: ['angular'], 
     'exports': 'angular.mock' 
    } 
} 

そして最後に、この

define([ 
    'angular', 
    'angularRoute', 
    'angularTranslate', 
    'angularTranslateLoadProvider', 
    'jquery', 
    'build', 
    'mapbox', 
    'leaflet', 
    'chosen', 
    'jqueryui', 
    'rating', 
    'slick', 
    'jquerymenu', 
    'fileLoader', 
    'main', 
    'view1/view1', 
    'view2/view2' 
], function (angular, angularRoute, view1, view2, angularTranslate, angularTranslateLoadProvider) { 
    // Declare app level module which depends on views, and components 
    return angular.module('myApp', [ 
     'ngRoute', 
     'pascalprecht.translate', 
     'myApp.view1', 
     'myApp.view2' 
    ]).config(['$routeProvider', '$translateProvider', function ($routeProvider, $translateProvider) { 
     $routeProvider.when('/menu', { 
      resolve: { 
       "prevent": function() { 
        window.location.href = window.lastPath; 
       } 
      } 
     }).otherwise({ redirectTo: '/view1' }); 
     $translateProvider.useStaticFilesLoader({ 
      prefix: 'translations/', 
      suffix: '.json' 
     }); 
     $translateProvider.preferredLanguage('es'); 
    }]); 
}); 
+0

「jQuery」をシミングする理由は何ですか? –

+0

@SandeepNayak私はrequierjsに新しいです。私はそれを見てそれを修正しようとすると、それに着いた。本当に言うことができない – MarBVI

+0

さて、あなたはAMD準拠ではないそれらのライブラリだけをシム。 jQueryはAMDに準拠しているので、jQueryのシムを削除することができます。 –

答えて

0

のように私のapp.jsのように見えますここに問題があります

defineのご注文は、の引数と一致する必要があります。コールバックの引数の順序は、あなたがそこであなたdefine

で依存関係としてモジュールをrequireingされる順序と一致する必要があります

define(['module1', 'module2',......, 'moduleK'], function(module1, module2,...., moduleK){ 

}); 

例えば、あなたのコードは次のようになります。 ;

define([ 
    'angular', 
    'angularRoute', 
    'angularTranslate', 
    'angularTranslateLoadProvider', 
    'jquery', 
    'build', 
    'mapbox', 
    'leaflet', 
    'chosen', 
    'jqueryui', 
    'rating', 
    'slick', 
    'jquerymenu', 
    'fileLoader', 
    'main', 
    'view1/view1', 
    'view2/view2' 
], function (angular, angularRoute, angularTranslate, angularTranslateLoadProvider, $, build, mapbox, leaflet, chosen, jqueryui, rating, slick, jquerymenu, fileloader, main, view1, view2) { 
..... 
+0

... app.jsで関数の宣言を変更しましたが、問題はまだ発生しています。私は問題がスクリプトの読み込み時間だと思います。 80%のケースでは、シムに宣言されているように、jQueryと他のライブラリがmain.jsの前にロードされています。しかし、main.jsがjQueryやjqmenuなどの前に実行されると、例外がスローされます – MarBVI

関連する問題