Angularjs 异步模块加载项目模板
ng-lazy-module-seed(Angularjs 异步模块加载项目模板)
相信做过SPA项目的朋友都遇到过这个问题:页面初始化时需要加载文件太大或太多了,许多文件加载后很可能不会运行到,这是赤裸裸的资源浪费。从性能角度出发,理想的 SPA 应该是:按需加载。
实现资源按需加载的方式有很多,不过在angular 1.x环境下存在这样一个问题:angular默认的模块化机制(使用angular.module
实现)需要在bootstrap前完成加载、注册,否则会报找不到provider。幸运的是,ocLazyLoad通过重写angular.module
函数,解决了上述问题,所以,我们可以大胆放心的使用ocLazyLoad进行异步模块化开发了。
在此分享一个基于 requirejs + angularjs + ocLazyload
的 Angularjs 异步模块加载项目模板。
技术栈
模板中主要用到如下技术:
- scss, compass
- require.js, angularjs, ocLazyLoad, r.js
- gulp, bower
运行项目
运行项目模板,查看demo,在已安装bower, node
的前提下请运行如下命令:
bower install
npm install
现在,依赖已经安装完毕,接下来可执行打包:
gulp -a
或者直接进行开发:
gulp watch
就可以看到页面了
项目文件夹结构
- .r :require 打包相关代码
- app :用于存放开发代码
- dist :用于存放生产环境代码
gulp 命令
// 开发环境
gulp watch
// 打包
gulp -a
// 部分打包
gulp
详细说明,后续补充
Angularjs 异步模块加载项目模板的更多相关文章
- javascript 异步模块加载 简易实现
在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...
- Dojo初探之1:AMD规范,编写符合AMD规范(异步模块加载机制)的模块化JS(其中dojo采用1.11.2版本)
一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...
- requirejs解决异步模块加载方案
他首先会遍历enableRegistry取出其中定义的模块,并且将没有加载成功的模块标识注入noLoads数组,如果过期了这里就会报错 如果上述没问题还会做循环依赖的判断,主要逻辑在breakCycl ...
- 对于模块加载:ES6、CommonJS、AMD、CMD的区别
运行和编译的概念 编译包括编译和链接两步. 编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言. 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.还简单的作一些比如检查有 ...
- jraiser模块加载执行简要总结
1 在html文件中,通过require方式来加载指定的入口文件:2 然后通过正则表达式来匹配入口文件中的所有require的依赖文件:注意,此时入口文件已加载完毕,不过,还没执行而已.3 之后逐一通 ...
- 也谈模块加载,吐槽CMD
先吐槽CMD,不要没头没脑的搞出个CMD,没意思. 大家都看AMD好了,异步模块加载机制,CMD并没有改变这个模式. 模块加载的关口就是getCurrentScript,每次define被调用的时候, ...
- AngularJS——第9章 模块加载
第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...
- 读懂CommonJS的模块加载
叨叨一会CommonJS Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
随机推荐
- 关于mac环境下删除cocos2d-x环境变量配置的方法
yangchaodeMacBook-Air:downloads yangchao$ vim ~/.bash_profile
- SSH服务器拒绝了密码,xshell连不上虚拟机怎么办
用Xshell链接虚拟机的时候,出现下面情况: 这是sshd的设置不允许root用户用密码远程登录 解决方案: 修改 vim /etc/ssh/sshd_config 找到# Authenticati ...
- 虚拟机centos6.5 --设置静态ip
编辑网卡文件,vi /etc/sysconfig/network-scripts/ifcfg-eth0修改以下内容: ONBOOT=no #改为yes, BOOTPROTO=dbcp #改为stati ...
- 从mysql数据表中随机取出一条记录
核心查找数据表代码: ; //此处的1就是取出数据的条数 但这样取数据网上有人说效率非常差的,那么要如何改进呢 搜索Google,网上基本上都是查询max(id) * rand()来随机获取数据. S ...
- [转帖]迅为4412开发板最小linux系统的存储空间修改
本文转自迅为论坛:http://www.topeetboard.com 最小linux系统的存储空间修改以修改成 1G 存储空间为例来修改,如果需要改成其他大小的存储空间,参照此方法修改即可. 首先连 ...
- LeetCode 2 Add Two Sum 解题报告
LeetCode 2 Add Two Sum 解题报告 LeetCode第二题 Add Two Sum 首先我们看题目要求: You are given two linked lists repres ...
- 【jQuery Demo】jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...
- 【读书笔记《Android游戏编程之从零开始》】11.游戏开发基础(SurfaceView 游戏框架、View 和 SurfaceView 的区别)
1. SurfaceView 游戏框架实例 实例效果:就是屏幕上的文本跟着点击的地方移动,效果图如下: 步骤: 新建项目“GameSurfaceView”,首先自定义一个类"MySurfac ...
- java 15-2 Collection的高级功能测试
A: boolean addAll(Collection c):添加一个集合的元素 ,所有的元素,无论是否重复 B: boolean removeAll(Collection c):移除一个集合的 ...
- hadoop面试100道收集(带答案)
1.列出安装Hadoop流程步骤 a) 创建hadoop账号 b) 更改ip c) 安装Java 更改/etc/profile 配置环境变量 d) 修改host文件域名 e) 安装ssh 配置无密码登 ...