分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

angularjs 路由 异步加载js

发布时间:2023-09-06 02:05责任编辑:白小东关键词: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 }

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

angularjs 路由 异步加载js

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved