1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > angular 引入ocLazyLoad实现js controller懒加载

angular 引入ocLazyLoad实现js controller懒加载

时间:2022-12-27 15:10:19

相关推荐

angular 引入ocLazyLoad实现js controller懒加载

项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller。现引入ocLazyLoad实现按需加载,到指定页面再加载指定js、controller

1、原引用controller.js,首页首次加载时间长,文件打包之后很大

2、引入路由懒加载,直接使用npm或者bower

npm install oclazyload

ocLazyLoad相关文件被下载到node_modules文件夹下。在index.html文件中引用ocLazyLoad.min.js

3、将ocLazyLoad注入到app中

4、在路由配置文件中(app.js)中修改路由配置部分:

原:

.state('index',{ url: '', templateUrl: 'views/login/login.html', controller: 'loginCtrl' }) 改为: .state('index',{ url: '', templateUrl: 'views/login/login.html', controller: 'loginCtrl', resolve: { loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){ return $ocLazyLoad.load('views/login/loginCtrl.js') }] } })

5、记录一下碰到的问题,在加入懒加载之后注释掉controller.js的引用文件,单个页面的js可以被获取到,但是提示controller未定义

查了很多,最后找到解决方法:

在配置路由的地方,加上"$controllerProvider"

app.controller = $controllerProvider.register;

这样才能将angularjs的$controllerProvider服务传入该对象中,$controllerProvider对加载进来的controller文件进行依赖关系的注入,就可以实现按需调用controller不会报错controller未定义了

结果就是这样 可以正常使用了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。