angularJS1笔记-(19)-angular异步加载包的方式

最新推荐文章于 2021-07-20 13:37:40 发布

转载最新推荐文章于 2021-07-20 13:37:40 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yk123/p/7049828.html

文章标签：

#javascript #ViewUI

本文探讨了使用异步方式加载资源以减少页面加载卡顿的方法，包括使用script标签的异步加载、解决依赖问题的嵌套方式及angular-loader库的自动处理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们平时写的导入包的方式都是同步方式，有时候会显得过于卡顿，这样我们就可以使用异步加载的方式。

script.js方式:

执行结果为:

异步加载还可以加载多个即为script([,,,],function(){})的形式，这样有可能会出现的问题是如果一个包比较小的话那么会率先加载下来而如果这个包依赖与其他未被下载下来的包的话就会出现找不到文件的错误.

一种解决方案为嵌套方式决定先后顺序：

还有一种方式就是引入angular-loader.js库这个库只需要你在上面引入后则会自动处理script()这个函数里的一些包与包之间的依赖关系。

load.js方式：

首先我们自己实现以下loadjs的方式,无非就是在head头里创建几个script标签然后src指向包的地址:

转载于:https://www.cnblogs.com/yk123/p/7049828.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34419321

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

SUB 的专栏

11-06

5787

传统的 angular 应用不支持异步加载模块，必须在 module 启动的时候，所有模块必须预加载进来。通过使用 angular-async-loader 库，我们可以使用 requirejs 等加载器，在 module 初始化之后，在动态异步加载其他的 Controller, Services, Filters 等等...

Angular 异步加载Controller

01-24

Angular异步加载html、Controller

参与评论您还未登录，请先登录后发表或查看评论

angular js 中异步加载

qq_33159000的博客

07-18

892

对于angular js中异步加载后台的时，要在访问主页面时让其执行异步加载的代码，如以下代码，异步加载后的数据要在子页面中使用，就要放在加载子页面之前执行该段代码 $http({ method: 'POST', url: 'getBusinessFields' //params : param }).success( function(response) {

AngularJS 实现按需异步加载实例代码

tao_wei162的博客

09-01

389

AngularJS 通过路由支持多视图应用，可以根据路由动态加载所需的视图，在 AngularJS 的文档中有详细的介绍，网上也有不少教程，就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性加载，使用起来非常不便，因此按需加载模块的需求会越来越强，不过，AngularJS 并没有实现按需加载。习惯了 seajs 的异步加...

angularjs 路由 异步加载js

weixin_30276935的博客

07-20

344

angularjs 异步加载js 有两种方法第一种使用$q 和 requireJS 加载这个问题首要出现在当我把require 引入项目中是，希望做到点击路由时加载相应的页面html和 js. 起初我是将 route 的 controller 设置为 require（‘controller.js’）来 异步加载，当然，问题是不可能这么简单的，肯定要出现一些问题。 ...

【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

06-13

5653

创建一个带路由的项目 ng n RouingApp --routing

angularjs解决页面异步加载的问题

qq_39511525的博客

10-18

2172

案列：由于项目中有地方一个API返回来了所有的信息，后面我需要根据这些信息进行筛选查询，就遇到了，前面的数据拿不到的情况解决方案：消息广播的机制 $scope.getColumnTree = function() { var path = "menu/getColumnTree.show"; var param = {}; ...

angularjs引入echarts包_AngularJS引入Echarts的Demo

weixin_39880318的博客

12-19

115

最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，试了试，最方便的还是用指令，(虽然指令有点不好调，用了再说)。1、引入angular.js2、引入echarts.js3、引入jquery.js---可以省略4、直接上代码：1 2 3 4 5...

angular 注入器配置_Angular 教程：异步加载和依赖注入

weixin_39753397的博客

12-21

302

我已经受够了用hard-coded数据来写应用。。。现在我们来尝试使用Angular提供的$http服务来从后台抓取一个大一点的数据集。我们会使用依赖注入的方式来给PhoneListCtrl控制器提供服务。现在页面上有一个从服务端获取的包含20台手机设备的列表最重要的改动如下所示。你可以在GitHub上查看它与之前的代码有何区别。数据 ????项目中的app/phones/phones.json文件是一...

AngularJS包

04-23

angularjs类库包，里面有3个文件，angularjs、angularjs-animate、angularjs-route

angular按需加载js

11-21

angular+require+angular-ui-router+angular-async-loader 根据需求加载js的一个demo

angular 1.5完整包

08-03

angular 1.5完整框架，AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 AngularJS 学习起来非常简单。

angularjs1.4.6官方下载包

10-13

angularjs1.4.6官方下载包有angularjs-ui-router.js

8/31JS的异步加载，还有angular的任务执行顺序，不懂

jdk1129的博客

08-31

479

Angular之constructor和ngOnInit差异及适用场景 https://blog.csdn.net/u010730126/article/details/64486997/

关于angularjs中的异步请求

weixin_34239169的博客

11-20

307

2019独角兽企业重金招聘Python工程师标准>>> ...

Angular 异步编程之（RxJs）初探

ChaITSimpleLove的博客

02-28

866

本节知识点是对【异步编程】的学习，首先我们来认识几个概念：什么是异步和同步？同步的概念：执行一个方法或者功能，在没得到结果前，其他方法不执行，一定得等当前方法执行完，才会执行下一步骤；异步的概念：执行一个方法或者功能，不需要等待到当前方法执行完，其他方法也可以执行；同步比较符合我们常规思维，相对简单，容易理解接受，异步不会按规定格式（硬编码顺序）按步骤执行，执行无序，相对复杂，...

实现异步加载图片

风起云涌

12-02

1255

项目中会经常用到异步加载图片并保存到SoftReference中，特此整理一下。 /** * 异步加载图片，使用SoftReference 软引用 * 它的作用是管理内存，防止内存溢出，还可以缓冲一些drawable让我们直接使用，当内存不足时才自动回收这些引用对象 * * @author Administrator * */ public class AsyncImageLoad

angular--异步编程

天行健君子以自强不息，地势坤君子以厚德载物。

07-20

1661

1. 异步编程目前常见的异步编程的几种方法： 1、回调函数 2、Promise 3、Rxjs 1.1 准备工作创建一个asynDemo的项目 ng new asynDemo; 创建一个obtain的服务，并且再app.moudle文件中引入和声明 ng g service services/obtain 创建一个home组件，并且再app.moudle文件中引入和声明 ng g component components/home 现在的项目结构: home组件引入和声