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 异步模块加载项目模板的更多相关文章

  1. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

  2. Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)

    一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...

  3. requirejs解决异步模块加载方案

    他首先会遍历enableRegistry取出其中定义的模块,并且将没有加载成功的模块标识注入noLoads数组,如果过期了这里就会报错 如果上述没问题还会做循环依赖的判断,主要逻辑在breakCycl ...

  4. 对于模块加载：ES6、CommonJS、AMD、CMD的区别

    运行和编译的概念 编译包括编译和链接两步. 编译,把源代码翻译成机器能识别的代码或者某个中间状态的语言. 比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.还简单的作一些比如检查有 ...

  5. jraiser模块加载执行简要总结

    1 在html文件中,通过require方式来加载指定的入口文件:2 然后通过正则表达式来匹配入口文件中的所有require的依赖文件:注意,此时入口文件已加载完毕,不过,还没执行而已.3 之后逐一通 ...

  6. 也谈模块加载，吐槽CMD

    先吐槽CMD,不要没头没脑的搞出个CMD,没意思. 大家都看AMD好了,异步模块加载机制,CMD并没有改变这个模式. 模块加载的关口就是getCurrentScript,每次define被调用的时候, ...

  7. AngularJS——第9章 模块加载

    第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...

  8. 读懂CommonJS的模块加载

    叨叨一会CommonJS Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢 ...

  9. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

随机推荐

  1. SQL2014内存表性能之内存中 OLTP 的性能改进测试

    先贴1个例子,后续补充完整的测试例子.... 1.用MSDN例子测试一下 use master go --1.先创建包含内存优化文件组的数据库 CREATE DATABASE imoltp2 ON P ...

  2. 第1章　Java中常用字符串方法总结

    1.1 charAt方法——提取指定字符 1.2 codePointAt方法——提取索引字符代码点 1.3 codePointBefore方法——获取索引前一个字符的代码点 1.4 codePoint ...

  3. oracle向in语句传入参数查不出数据

    在oracle字符串中使用了in,但是查不出数据 string getModel = "select * from TB_YBSH where ID in :ids"; Oracl ...

  4. 烂泥：KVM虚拟机的关机与开启

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 我们在开启与关闭KVM虚拟机时,一般是通过start.shutdown.reboot等命令来进行.但是有时候我们会发现在使用shutdown.reboo ...

  5. FZU 1608 Huge Mission(线段树)

    Problem 1608 Huge Mission Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description Oaiei ...

  6. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  7. QEMU启动时插入tap虚拟网卡

    1.利用brctl命令创建虚拟网桥br0 brctl addbr br0 ifconfig br0 up //上述两条命令分开执行会导致网络断开 2.将虚拟网桥br0与物理网卡eth0绑定 brctl ...

  8. 利用HttpListener创建简单的HTTP服务

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...

  9. Git版本控制工具（一）----git的安装及创建版本库

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  10. 第22章 DLL注入和API拦截（2）

    22.4 使用远程线程来注入DLL 22.4.1 概述 (1)远程线程注入是指一个进程在另一个进程中创建线程,然后载入我们编写的DLL,并执行该DLL代码的技术.其基本思路是通过CreateRemot ...