使用RequireJS只是在AngularJS应用程序的索引页面中加载脚本是否有意义

时间:2014-12-09 21:54:03

标签: angularjs requirejs

我有一个Angular应用程序,我通过多个脚本标记(即angular.min.js,angular-route.min.js等)直接加载我的依赖库。在这个实例中使用requirejs加载它们而不是将它们放在索引页面的底部是否有意义。 Angular有依赖注入,所以我不像骨干应用程序,我没有看到大的优势:

    <!-- Placed at the end of the document so the pages load faster -->
<script src="js/libs/jquery-2.1.0.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/app.js"></script>

创建main.js似乎需要很多开销,例如:

require.config({
paths: {
    jquery: "/libs/jquery-2.1.1.min",
    bootstrap: "/libs/bootstrap.min",
    angular: "/libs/angular.min.js",
    angularrouter: "/libs/angular-route.min.js",
    angularresource: "/libs/angular-resource.min.js",
    services: "services/services.js",
    controllers: "/controllers/controllers.js",
    app: "app.js"
},
shim: {
    bootstrap: {
        deps: ['jquery'],
        exports: 'Bootstrap'
    },
    angularrouter: {
        deps: ['angular'],
        exports: 'AngularRouter'
    },
    angularresource: {
        deps: ['angular'],
        exports: 'AngularResource'
    },
}
});

require(['jquery', 'boostrap', 'angular', 'angularrouter', 'angularresource', 'services', 'controllers', 'app'], 

function ($, Bootstrap, angular, AngularRouter, AngularResource, services, controllers, app) {
angular.bootstrap(document, [app.name]);
});

然后尝试在app.js中执行某种引用:

define(['jquery','boostrap','angular','angularrouter','angularresource','services','controllers','app'],function($,Bootstrap,angular,AngularRouter,AngularResource ,服务,控制器){

0 个答案:

没有答案