美文网首页
angular+require按需加载

angular+require按需加载

作者: 幸福幸福幸福 | 来源:发表于2017-05-01 09:32 被阅读120次

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ipc后台管理系统</title>
    </head>
    <body>
    
    <script src="res/lib/require/require.min.js" data-main="res/script/main" defer async></script>
    </body>
    </html>
    

    main.js

    window.loading={
        finish:function(callback){
            //保留这个方法做一些加载完成后的处理,比如可以在这里结束加载动画
            callback();
        },
        load:function(){
            // var domain='https://865077695.github.io/admin/';
            var domain='';
            var baseUrl = domain+'res';
            require.config({
                baseUrl:baseUrl,
                paths:{
                    "domReady":["https://cdn.bootcss.com/require-domReady/2.0.1/domReady.min","lib/require/domReady.min"],
                    "angular":["https://cdn.bootcss.com/angular.js/1.3.20/angular.min","lib/angular/angular.min"],
                    "angularTouch":["https://cdn.bootcss.com/angular.js/1.3.20/angular-touch.min","lib/angular/angular-touch.min"],
                    "angularAnimate":["https://cdn.bootcss.com/angular.js/1.3.20/angular-animate.min","lib/angular/angular-animate.min"],
                    "uiBootstrap":["https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min","lib/angular/ui-bootstrap-tpls.min"],
                    "uiRouter":["https://cdn.bootcss.com/angular-ui-router/0.4.2/angular-ui-router.min","lib/angular/angular-ui-router.min"],
                    "angular-nice-bar":"lib/angular/angular-nice-bar",
                    "asyncLoader":"lib/angular/angular-async-loader",
                    "jquery":["https://cdn.bootcss.com/jquery/1.12.4/jquery.min","lib/jquery/jquery.min"],
                    "echarts":["https://cdn.bootcss.com/echarts/3.4.0/echarts.min","lib/echarts/echarts.min"],
                    "chinaMap":"lib/echarts/china",
                    "loadCss":"script/loadCss",
                    'load':"lib/load",
                    "routes":"script/routes",
                    "app":"script/app",
                    "index":"script/index",
                    "superController":"script/superController",
                    "myService":"script/myService",
                    "myDirective":"script/myDirective"
                },
                shim:{
                    "angular":{
                        exports:"angular"
                    },
                    "uiRouter":{
                        deps:["angular"]
                    },
                    "angularTouch":{
                        deps:["angular"]
                    },
                    "angularAnimate":{
                        deps:["angular"]
                    },
                    "uiBootstrap":{
                        deps:["angular","angularTouch","angularAnimate"]
                    },
                    "load":{
                        exports:"load"
                    },
                    "angular-nice-bar":{
                        deps:["angular"]
                    },
                    "echarts":{"exports":"echarts"}
                },
                deps:['index']
            });
        }
        
    }
    window.loading.load();//执行配置
    

    index.js 启动angular

    define(["require", "load"], function (require,load)
    {
        load.onLoading();   //开始执行动画、load是一个加载动画的小插件
        require(["angular","routes","myDirective"],function(angular){//载入angular、routes配置、directive配置
            require(['domReady!'], function (document)
            {     //domReady依赖的!前缀来强制require()回调函数在执行之前等待DOM Ready。
                /*手工启动angular*/
                window.loading.finish(function ()
                {
                    angular.bootstrap(document,['app']);//启动ng
                    load.close();//关闭动画
                });
            });
        })
    })

    相关文章

      网友评论

          本文标题:angular+require按需加载

          本文链接:https://www.haomeiwen.com/subject/icbqattx.html