为什么要整合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. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  2. WPF内置命令

    <Window x:Class="WpfCommands.MainWindow"         xmlns="http://schemas.microsoft.c ...

  3. MyBatis调用Oracle存储过程

    MyBatis调用Oracle存储过程 1.无输入和输出参数的存储过程 2.带有输入和输出参数的存储过程 3.返回游标的存储过程 mybatis中的配置文件代码 <resultMap type= ...

  4. 微信小程序-地图组件

    map 地图. 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬 ...

  5. phpcms 中路径问题

    <table width="100%" border="0" cellspacing="0" cellpadding="0& ...

  6. js小程序写法优化

    (function(){ var gcld_but = document.getElementById("gcld_but"), gcld_but_li = gcld_but.ge ...

  7. JavaScript中关于地址的获取

    //取当前页面名称(不带后缀名) function pageName(){ var a = location.href; var b = a.split("/"); var c = ...

  8. TAG-9F10 发卡行相关数据(转)

    Tag-9F10  发卡行相关数据 9F10-发卡行应用数据 标签:9F10 字节1 –“ 07” 字节2 –DKI 长度:var10-25字节 字节3 – 密文版本号 格式:b 字节4 –“ 03” ...

  9. [原创] Win7全自动精简批处理_绝对原创,绝对给力_感谢无忧给了我一年的潜水

    2011htpcfans发表于 2012-5-5 http://bbs.wuyou.net/forum.php?mod=viewthread&tid=210043 @echo 全自动/手动精简 ...

  10. WPF中RDLC报表的钻取实现

    1.新建wpf项目,并引入3个程序集: Microsoft.ReportViewer.WinForms WindowsFormsIntegration System.Windows.Forms 如果无 ...