Angular-Ui-Router+ocLazyLoad动态加载脚本

最新推荐文章于 2024-08-13 08:14:49 发布

正在输入代码中

最新推荐文章于 2024-08-13 08:14:49 发布

阅读量4.6k

点赞数

分类专栏： web前端 Angular 文章标签： angularjs Ui-Router ocLazyLoad

本文链接：https://blog.csdn.net/qq_26744901/article/details/51861746

版权

web前端同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

Angular

18 篇文章 0 订阅

订阅专栏

在大型项目中，一次性加载所有js和css会影响用户体验。通过使用Angular-Ui-Router和ocLazyLoad，可以在需要时动态加载组件的脚本，提高加载速度。ocLazyLoad是一款15K大小的Angular脚本加载器，它允许在路由渲染前通过resolve加载所需js和css，避免控制器注入问题，并且已加载的脚本会被浏览器缓存。

摘要由CSDN通过智能技术生成

在使用angular过程以前同事是采取一次性加载方式，在index页面一次性加载所有的js跟css，这种加载方式只适合教学和小型项目中，中大型不建议使用，加载速度影响到用户体验。

在使用了Ui-Router以后，我第一想法就是把每个功能组件化，在请求视图的时候再去加载该页面js和css，index页面主要加载必须文件：angular.js

于是尝试了下，这样去写，但是发现angular报错，原因是控制器没有注入主程序

后面在angular库里面发现ocLazyLoad，这是一个为angular量身定制脚本加载器，它只有15K

使用它很简单：

依次载入文件

<script src="framework/angular/angular.min.js"></script>
<script src="framework/angular-ui-router.js"></script>
<script src="framework/ocLazyLoad.min.js"></script>
<script src="framework/app.js"></script>

跟平常写路由一样只是需要多一层resolve

路由在渲染之前会执行resolve对象比如用来加载js和css，当然还有其他用处

代码：（不用担心脚本重复加载，之前加载的脚本会在浏览器做缓存）

angular.module('myRouters', ['ui.router','oc.lazyLoad'])

                .state('index', {
                    url: '/index',
                    title: ' | ！',
                    views: {
                        'A': {
                            templateUrl: 'components/header/header.html',
                            controller: 'headerCtrl'
                        },
                        'C@index': {
                            templateUrl: 'components/header/h1.html',
                            controller: 'H2Ctrl'
                        }
                    },
                    resolve: {
                        loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                            return $ocLazyLoad.load(['components/header/H2.js',
                                'components/header/header.js',
                                'components/header/h3.js',
                                'components/header/header1.css']);
                        }]
                    }
                })