AngularJs、RequireJs、AngularAMD、ui-router搭建的JS文件动态加载

最新推荐文章于 2019-12-05 21:57:34 发布

YuanLicc

最新推荐文章于 2019-12-05 21:57:34 发布

阅读量2.2k

点赞数 2

分类专栏： AngularJs学习笔记文章标签： angularjs requireJs angularAMD uirouter

本文链接：https://blog.csdn.net/B_boy_hong10/article/details/66968249

版权

AngularJs学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如今页面的复杂度极高，需要加载的脚本文件极多，降低了用户体验，所以写了这个动态加载脚本的demo，欢迎交流：

1. 主页：requireJs 入口：data-main="mian.js"，如下：

<!DOCTYPE HTML>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
  <script type="text/javascript" data-main="main.js" src="../lib/requireJs/2.1.20/require.min.js"></script>
</head>
<body>
    <div ui-view></div>
</body>
</html>

2. main.js

require.config({
    baseUrl : '/AngularJsClass/app',//脚本加载的相对路径，后面的动态加载脚本都是相对于这个路径写的，如果您非要写全路径，
可以忽略这个路径，但是您在加载的时候得书写完整，如：加载js文件：/AngularJsClass/app/views/main/rightList/rightList.js
忽略baseUrl的写法："views/main/rightList/rightList"
未忽略："/AngularJsClass/app/views/main/rightList/rightList.js"
注意上面的区别，这点很重要，要不然会出现无法动态加载脚本的尴尬。
    paths : {//依赖的模块
        "angular" : "/AngularJsClass/lib/angular/angular.min",
        "angularAMD" : "/AngularJsClass/lib/angularAMD/angularAMD.min",
        "ngLoad" : "/AngularJsClass/lib/angularAMD/ngload.min",
        "angularUiRouter" : "/AngularJsClass/lib/uiRouter/0.2.15/angular-ui-router.min",
    },
    shim : {//模块的依赖关系，这个决定了加载的优先级
        "angular" : {
            experts : "angular",
        },
        "angularUiRouter" : {
            deps : ["angular"],
            experts : "angularUiRouter"
        },
        "angularAMD" : {
            deps : ["angular"],
            experts : "angularAMD",
        },
        "ngLoad" : {
            deps : ["angularAMD"],
            experts : "ngLoad"
        }
    },
    deps : ['app']//启动应用
});

3. app.js

define(['angularAMD','angularUiRouter','angular','ngLoad'],function (angularAMD){

    var app = angular.module('app',['ui.router']);

    app.run(function($rootScope,$state,$stateParams){
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });

    app.config(function($stateProvider,$rootScopeProvider,$urlRouterProvider,$controllerProvider){//路由
        $urlRouterProvider.otherwise('/main/index');//页面默认路由
        $stateProvider
            .state('main',angularAMD.route({
                url : '/main',
                templateUrl : '../app/views/main/main.html'
            }))
            .state('main.index',angularAMD.route({
                url : '/index',
                views : {
                    'rightList@main' : angularAMD.route({
                        templateUrl : 'views/main/rightList/rightList.html',
                        controller : 'rightListController',
                        controllerUrl : 'views/main/rightList/rightList',//对应第一点的未忽略baseURL的写法，上面没看懂可以结合一下看，这里的这个js文件就是动态加载的
                    }),
                    'content@main' : angularAMD.route({
                        templateUrl : 'views/main/content/content.html',
                        controller : 'contentController',
                        controllerUrl : 'views/main/content/content',
                    })
                }
            }))
    });
    return angularAMD.bootstrap(app);
})

4. main.html

<!--代表右侧的导航栏-->
<div ui-view="rightList"></div>
<!--代表页面的内容-->
<div ui-view="content"></div>

由上面app.js中书写的默认路由及路由，我们知道，页面打开的时候它会跳转到默认路由，也就是会加载上面的所有页面及脚本。

YuanLicc

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录