ionic(angular)之优化路由（路由懒加载，包括js文件和html，css都按需加载）

最新推荐文章于 2022-05-11 15:49:47 发布

原创最新推荐文章于 2022-05-11 15:49:47 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #angular #路由懒加载

angularJs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在Angular项目中实现懒加载功能，通过在index.html中引入ocLazyLoad.min.js，然后在模块中注入oc.lazyLoad服务，最后在路由配置中使用resolve属性来动态加载控制器和样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先在index.html中引入ocLazyLoad.min.js

<script src="https://cdn.bootcss.com/oclazyload/1.1.0/ocLazyLoad.min.js"></script>

2.注入oc.lazyLoad

angular.module('app', ['ionic','oc.lazyLoad'])

3.在路由中使用

.state('order',{ // 订单
            url:'/order',
            templateUrl: function () {
                return 'template/order.html'
            },
            controller:'orderCtrl',
            resolve:{
                loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
                    return $ocLazyLoad.load(
                        {
                            files:['js/controller/order.js','css/order.css'],
                            cache: false
                        }
                    )
                }]
            }
        })

大功告成，收工。。。。。。。。

源码：https://download.youkuaiyun.com/download/qq_33040483/10914781