angularjs 路由 异步加载js
angularjs 异步加载js 有两种方法
第一种 使用$q 和 requireJS 加载
这个问题 首要出现 在 当我 把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 }
这样就成功的解决了这个问题。
第二种 使用ocLazyLoad.js 配合 ui-router 加载。
首先在页面引入 ocLazyLoad.js 、ui-router.
然后建立 module
var app = angular.module('myapp', ['ui.router', 'oc.lazyLoad']);
function asyncJS(js) { // 此处可以将路由 异步加载js 提到 公共部分。return ['$ocLazyLoad', function ($ocLazyLoad) {return $ocLazyLoad.load('/luci-static/resources/modules/controllers/' + js + '.js'); //此为 加载路径}]}$urlRouterProvider.when('', '/quickSet');$stateProvider.state('quickSet', {url: '/quickSet',templateUrl: '/luci-static/resources/layout/quickSet.html',controller: 'quickSet', //此处函数名与加载的函数名一致。resolve: { //在resolve 中 调用 loadController: asyncJS('quickSet')}})
这样当路由执行时,才加载子页面的controller。
子页面的controller 必须以 重新 绑定 app的congtroller 才会生效。
此为 子页面controller 的头部
angular.module('myapp', []).controller('quickSet', ['$scope', '$http', '$log', function ($scope, $http, $log) {}
转载于:https://www.cnblogs.com/RoadAspenBK/p/9340698.html
angularjs 路由 异步加载js相关推荐
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
- phoneGap异步加载JS失败
现在正在做一个phoneGap项目,安卓平台,有个异步加载JS总是失败,phoneGap也不好调试,一个问题纠结了一下午 最后找了半天,找到了原因,因此写本文记录一下,也顺便帮帮遇到同样问题的人 原因 ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果
异步加载js文件并执行js方法:实现异步处理网页的复杂效果 有这么一个场景,当你的网页页面效果过多就会造成了打开页面的速度变得缓慢,长时间处于加载的状态,这样的效果通常会让用户感到不友好,通常的处理方 ...
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- jekyll静态博客提升访问速度:内嵌CSS,异步加载js,压缩HTML
在谷歌搜索的功能速度(实验性)中推荐使用工具PageSpeed Insights查看我的网页访问速度情况:PageSpeed Insights 分数很低,只有33分. 优化建议的第一条是移除阻塞渲染的 ...
- 异步加载js文件的方法总结
方法一,jQuery.getScript HTML 代码: 代码如下 复制代码 <button id="go">Run</button> <div c ...
- 14. 异步加载Js的方式有哪些?
我们都知道渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染,如下: <script type="text/javascript" src=". ...
- JS 异步加载js的三种方案
js文件同步加载的缺点: 页面的js文件一般是同步加载,加载到js文件会阻断html和css的加载,要等到js文件加载完毕,才能继续向下执行,因为js文件可能会操作html和css:但有些js文件不会 ...
最新文章
- VUE的组件DEMO
- 复制已有的Tomcat作为新的Tomcat,只需修改三个配置文件,五步操作,保证能正常运行!
- ThinkPHP的标签制作
- 我用java爬了一下CSDN,发现了这些秘密。。。
- 京东《未来科技趋势白皮书》,101页pdf
- javascript 判断浏览器
- Fragment系列总结(一)Fragment概念与生命周期
- 两个自变量和一个因变量spss_多个自变量(包括离散变量和连续变量)对一个因变量的影响(SPSS:协方差分析)...
- vue怎么插入接口demo_前端学起来特别吃力,新人入前端怎么学?
- windows搭建SVN服务MD版
- 浏览器根对象document之字符串属性
- java同步方法同步块_java 同步代码块与同步方法
- 目标检测算法——SSD
- 装系统需不需要格式化系统盘?别再被这些说法骗了!
- stp转obj, stp转stl转换小工具
- 教你如何学习思维导图
- 怎么用手机记笔记?安卓手机超实用的笔记app
- 婴儿围栏ASTM F406亚马逊CPC美国CPSIA认证玩具CPC认证儿童产品CPC认证
- 报错 error: use of undeclared identifier (AS)
- 利用matlab数米粒数量,数米粒个数和每个米粒面积的matlab算法实现(递归)。
热门文章
- Could not find module ‘D:\codna\Library\bin\geos_c.dll‘
- 深度学习与TensorFlow:FCN论文学习笔记
- 少走弯路:Mac+python+opencv
- 电路理论与linkage Mapper的安装
- 构思解决问题的一般范式
- 6*6行列式相加的c语言,求行列式的值,用C语言怎么写啊?
- 数据库连接php_php 连接 数据库
- mysql en dump_mysqldump 命令总结
- 计算机硬件知识pdf,计算机硬件知识 (很详细)
- 第四章信息系统安全基础考试要点及真题分布