为什么要整合RequireJS

RequireJS是一个Javascript 文件和模块框架,通过模块的方式来配置js文件之间的依赖关系,遵守的是CommonJS的AMD标准。

在开发的时候则无需关注某个js是否应该在另一个js之前先引入,也不需要去写一大堆冗长的js引入代码。

模块化后,RequireJS按需加载,用到哪个模块则加载哪个js文件,这对于Angular中的Route非常重要(Angular的Route配置中,所有Controller的配置文件都是一次性加载完毕的,不过同样还得需要引入一个第三方的小插件来实现这个功能)。

同时他加载js是异步的,不会阻塞页面渲染。

1、 简单demo的项目目录如下

2、在首页index.html只需要引入requireJs库文件,并且指明入口函数main.js

首页引入这个js

<script data-main="scripts/main.js"  src="scripts/ext/require.js"></script>

3、配置main.js

关于require.config()中的配置大概如下,文件名称不需要加 .js后缀,requireJS会在运行时自己加上

baseUrl

模块查找的根目录,默认情况与data-main所赋值处于同一目录

paths //定义出所有的js模块

shim  //定义模块的依赖关系和自身暴露的属性

启动app入口,进入app.js

4、项目路由配置

define 是定义一个模块,同时引入依赖的模块。define接受两个参数,

第一个参数是一个数组,用来表示依赖的模块,

第二个参数则是一个函数,用来定义这个模块本身的行为

5、一个angular应用是跑起来的“入口”

不去指定ng-app,通过JS代码执行:angular.bootstrap(element, ['模块名'...]),一样也是可以启动的(比如:angular.bootstrap(document, [myModule.name]);)

6、控制器动态加载所需文件(service、directive…等) 

关于RequireJS与AngularJS的集成文档的更多相关文章

  1. 【JEECG技术文档】JEECG在线聊天插件功能集成文档

    原文地址:http://jeecg.iteye.com/blog/2320670 JEECG在线聊天插件功能集成文档 前提: 采用jeecg_3.6.3版本以上(Maven工程) 插件项目: 在线聊天 ...

  2. CAT部署集成文档

    1. 下载编译 1.1 下载源码 首先,到项目的git网页下载整个项目: https://github.com/dianping/cat 1.2  打包安装 接着就是进入这个项目的目录,运行打包安装命 ...

  3. 9、pytest -- 集成文档测试

    目录 1. 集成doctest模块 1.1. 通过指定文本文件的方式 1.2. 通过编写文档字符串的方式 1.3. 指定额外的选项 2. 失败时继续执行 3. 指定输出的格式 4. 文档测试中使用fi ...

  4. ASP.NET Core 1.0 中使用 Swagger 生成文档

    github:https://github.com/domaindrivendev/Ahoy 之前文章有介绍在ASP.NET WebAPI 中使用Swagger生成文档,ASP.NET Core 1. ...

  5. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  6. 使用Ldoc给Lua生成文档

    Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...

  7. 使用PhpDocumentor生成文档

    一,网站根目录执行 $ composer require --dev phpdocumentor/phpdocumentor 二,进入vendor/bin/目录执行 $phpdoc -d D:\ser ...

  8. doxygen的使用(一)配置并生成文档

    原创文章,欢迎阅读,禁止转载. doxygen是个好用的文档生成工具,他的强大功能有很多介绍,我就不说了.自带的chm帮助手册很全面,包括功能.注释规范.怎么配置.工具用法等.doxygen的用法共3 ...

  9. 配置WCF同时支持WSDL和REST,swaggerwcf生成文档

    配置WCF同时支持WSDL和REST,SwaggerWCF生成文档 VS创建一个WCF工程,通过NuGet添加SwaggerWcf 创建完成后通过 程序包管理控制台 pm>Install-Pac ...

随机推荐

  1. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  2. 【前端】制作一个handlebars的jQuery插件

    (function($) { var compiled = {}; $.fn.handlebars = function($srcNode, data) { // 取出模版内容 var src = $ ...

  3. Java类的加载

    1.类的加载步骤 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载.连接.初始化三步来实现对这个类的初始化 加载:将class文件读入内存,并为之创建一个Class对象,任何类被使用 ...

  4. shell,bash,git bash,xshell,ssh

    一:shell是linux/unix系统的外壳,也可以理解为命令行接口,就是你输入并执行命令行的地方.bash(born again shell)是shell的一种,最常用的shell之一.你在你的l ...

  5. memcached安装

    memcached安装 一.安装gcc # yum -y install gcc 二.安装libevent # wget http://www.monkey.org/~provos/libevent- ...

  6. Usage: AddDimensionedImage imageFile outputFile eclipse 运行程序出错

    关于这个在eclipse中运行java程序的错,首先确认你的jdk,jre是否完整,并且与你的eclipse的位数相同,当然我相信这个错误大家应该都会去检查到. 第二个关于addDimensioned ...

  7. em和rem

    em是一个相对值,是相对于父元素的值. body{ font-size:62.5%;/*10/16*100%=62.5%*/ } h1{ font-size:2.4em;/*2.4em*10=24px ...

  8. php : 基础(1)

    php基本语法形式 1.php的标记符 有以下形式: 形式1(推荐): <?php 这里要写符合php语法的语句 ?> 形式2: <script language="php ...

  9. unreal 自定义 Slate Style Sets

    搜集到的最有价值的一篇教学,按照作者的方法尝试中遇到了一些问题.[感谢这位作者!] 网址:https://wiki.unrealengine.com/Slate_Style_Sets_Part_2 在 ...

  10. hadoop修改MR的提交的代码程序的副本数

    hadoop修改MR的提交的代码程序的副本数 Under-Replicated Blocks的数量很多,有7万多个.hadoop fsck -blocks 检查发现有很多replica missing ...