angularjs 路由 异步加载js

这个问题 首要出现 在 当我 把require 引入 项目中是,希望做到 点击路由时加载相应的页面html和 js.

起初我是将 route 的 controller 设置为 require(‘controller.js’) 来 异步加载,

当然,问题是不可能这么简单的,肯定要出现一些问题。

这样就出现一个问题,当 我路由子页面 中出现 与数据相关的 初始化时,第一次跳转是正常的,此时跳到其他页面,再跳回该页面时 controller的数据 却无法获取。

导致页面空白。

$routeProvider.when(‘/quick_set‘, {
           templateUrl: ‘layout/quick_set.html‘,
           controller: require(‘quick_set‘)
  })

关于这个问题的解决我也看了很多的博客,找到了以下的解决方案。

利用 angularjs 内置的 $q 服务,类似于 es6 中的 promise,即创建异步加载,在 加载完成后返回 promise ,通过promise 来判断是否成功加载js,成功加载之后再 赋给controller,

程序写在 route 的 resolve 里。

1 $routeProvider.when(‘/quick_set‘, {
2                 templateUrl: ‘layout/quick_set.html‘,
3                 controller: ‘quick_set‘,
4                 resolve: {
5                     loadController: app.asyncJS(‘quick_set‘)  //在这里 加入 异步请求
6                 }
7             })
 1 app.asyncJS = function (js) {
 2   return function ($q) {
 3       var deferred = $q.defer();
 4       require([js], function (controller) {
 5               $controllerProvider.register(js, controller);      //由于是动态加载的controller,所以要先注册,再使用
 6               deferred.resolve(); //将 返回的promise标记为 resolve 状态,即 成功状态,reject 问拒绝状态。
 7         });
 8        return deferred.promise;
 9   }
10 }

这样就成功的解决了这个问题。

原文地址:https://www.cnblogs.com/RoadAspenBK/p/9340698.html

时间: 2024-10-08 13:41:11

angularjs 路由 异步加载js的相关文章

实现异步加载js文件及加载完成后回调

模块化工具类实现方式 基于AMD.CMD模式的JS模块化管理工具越来越流行,这些工具通常只需在页面中加载对应的工具JS,其他JS文件都是异步加载的,比如RequireJS就可以象下面这样做. 首先在页面加载 <script data-main="scripts/main.js" src="scripts/require.js"></script> 然后工具会自动识别data-main属性值,并加载对应的JS文件,在main.js可以加载更多模

请给出异步加载js方案

请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. 异步加载方式: (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack,见代码: function loadScript(url, callback

异步加载JS

在脚本之家看到了三种异步加载JS的方法: 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.wr

phoneGap异步加载JS失败

现在正在做一个phoneGap项目,安卓平台,有个异步加载JS总是失败,phoneGap也不好调试,一个问题纠结了一下午 最后找了半天,找到了原因,因此写本文记录一下,也顺便帮帮遇到同样问题的人 原因其实很简单,就是文件名大小写的问题,phoneGap对文件名大小写是敏感的,也就是区分大小写 异步加载时一定要注意文件名大小写,然而对于我们经常做WEB的很容易忽略这个问题,所以大家要注意此问题

Vue中router路由异步加载组件-优化性能

何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加载小的js文件的开销大:所以当首页一次性加载的文件太大时,可以使用异步加载组件的写法. 原先写法: 异步加载写法: 不仅路由内可以使用异步加载,组件内也可使用异步加载,建议只有当app.js大于1M时再使用: 原文地址:https://www.cnblogs.com/nayek/p/11824987

异步加载js文件的方法总结

方法一,jQuery.getScript HTML 代码: 代码如下 复制代码 <button id="go">Run</button><div class="block"></div> jQuery 代码: jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ $

异步加载 js

1.defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了. 如果您的脚本不会改变文档的内容,可将 defer 属性加入到<script> 标签中,以便加快处理文档的速度. 因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止. 示例: &

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

黄聪:异步加载JS的4种方式(详解)

方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).rea