1、angularjs的路由,不管是内置还是UI-ROUTER在使用的时候都有个讨厌的问题,有些JS文件必须最后加载,但页面读取过程是不会等待路由容器加载路由页面完成后再加载外部JS文件的。
2、而如果将JS文件加载到路由页面中,发现根本不能加载,原因据说是因为路由模板读取的模式问题,
3、最吐血的是就算你通过延时之类的方法中确保首次打开页面,JS文件最后加载,但再路由切换过程中,页面并不刷新,所以模板文件又跑到JS文件后面去了,于是通过监控路由切换刷新页面,发现这不但失去了路由的意义,而且也不能保证每次刷新读取顺序正确。
4、在网上找了很多方法,借助第三方插件还是很难保证JS文件一点迟于模板加载完成,而且也不能保证多个JS文件的先后顺序。
折腾了半天,用了一个很笨的办法。
首先对路由切换进行监听,发生变化时再加载JS文件,但这样会在切换中,加载多个相同的JS文件,所以必须先删除前一个加载的然后重新加载代码如下:
$scope.$on('$destroy', function() {
$('#amjs').remove();
$('#appjs').remove();
$(document.body).append('<script id="amjs" src="assets/js/amazeui.js"><\/script>');
$(document.body).append('<script id="appjs" src="assets/js/app.js"><\/script>');
})
测试发现效果不错,但同时又出现了一个问题,如果用户不小心刷新了页面,JS文件将不被加载,于是又加入监听页面刷新的方法
$scope.$watch('$viewContentLoaded', function() {
$('#amjs').remove();
$('#appjs').remove();
$(document.body).append('<script id="amjs" src="assets/js/amazeui.js"><\/script>');
$(document.body).append('<script id="appjs" src="assets/js/app.js"><\/script>');
});
用了下反正是能实现我自己的要求了,作为一个菜鸟,只能用这个笨方法了。