angularjs+requirejs整合
通过requirejs的配置让angularJS可以正常运行。以下是配置的步骤:
环境需求
- require.js
- angular.js
有了这两文件,就可以进行下一步了,具体将文件放到哪个目录,可以跟项目的目录结构走,无所谓。
配置步骤
首先要配置require.js的入口文件main.js
require.config({
//配置angular的路径
paths:{
"angular":"js/angular",
},
//这个配置是你在引入依赖的时候的包名
shim:{
"angular":{
exports:"angular"
}
}
})
配置地址的时候容易出错,这里需要些耐心。
下一步是最关键的一步了,我在弄的时候被绕懵了好几次,英文网站上的教程用的名词容易分不清,英文不好是硬伤。。。
我们平常在写angular的时候是这样写的:
var app = angular.module("模块名",[]); app.controller("foo",function($scope){});
app.directive(...)
可以看到,几乎所有的操作都是在app上进行的。那么,在使用requirejs的时候,我们通常是这样写模块的:
define(["jquery"],function($){})
而两者结合起来理想中应该是这样的:
//ctrl.js
define(['app'],function(app){
app.controller("mainController",function($scope){
...
})
})
//dirct.js
define(['app'],function(app){
app.directive("xxx",function(scope){
...
})
})
可以看到,我们在编写controller和directive(或者service等等)的时候,都需要将方法作用在app
上,那么这个app是什么的呢,其实可以想到,
就是angular.module("模块名",[])
那么,如何让所有的模块都能引入angular.module("模块名",[])呢,我们新建一个app.js
define(["angular","angular-route"],function(angular){
return angular.module("模块名",[]);
})
这样,我们在引入app.js的时候,就可以拿到这个angular module了。
当这些步骤都做完之后,你会发现,这个程序还是跑步起来。所以我们还有最后一步。在启动一个angular程序的时候,需要把所有使用angularjs编写的模块都加载到页面中,要不然肯定会报错。。所以,我们需要一个angular的加载模块,这里我们可以在main.js里面添加
//main.js完整版
require.config({
//配置angular的路径
paths:{
"angular":"js/angular",
"ctrl:"js/ctrl",
"dirct":"js/dirct",
"app":"js/app"
},
//这个配置是你在引入依赖的时候的包名
shim:{
"angular":{
exports:"angular"
}
}
});
require(["angular","ctrl","dirct","app"], function(angular) { angular.bootstrap(document,["app"]); });
angular.bootstrap
方法是angular自带的,顾名思义,如果手工去调用,就是启动一个angular app的意思。具体看文档。
这样,在你的页面中引入<script src="js/require.js" data-main="js/main.js"></script>,就可以运行angular程序了!
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS AngularJS + RequireJS App</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="js/require.js" data-main="js/main.js"></script>
</body>
</html>
以上需要注意的地方:
1、index.html页面不要添加ng-app指令,否则会报错,详情请参考angularjs的加载流程,使用require.js时推荐使用angularjs手动加载方式
angular.bootstrap(document,["app"],不用使用自动加载;
2、如上配置完之后,页面的加载会有闪烁,于是将模板中的{{xxx}}都改成了ng-bind的形式。改完了之后从页面渲染完到angular将数据填充完毕的那几百毫秒还是会闪一下。于是我想出了个hack,就是现在body或者某父标签上加一个class这个class是负责visibility:hidden
的。等到angular把数据填充完毕,再用jQuery把那个class remove掉,这样就不会有闪烁了,进来先是空白的,然后一下子出来,也比较符合平常的用户习惯。
参考文档:http://www.startersquad.com/blog/angularjs-requirejs/
angularjs+requirejs整合的更多相关文章
- 前端angularjs+requirejs+dhtmlx 后端asp.net webapi
享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi 一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...
- AngularJS+requireJS项目的目录结构设想
AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default 放页面,不过 ...
- AngularJS + RequireJS
http://www.startersquad.com/blog/AngularJS-requirejs/ While delivering software projects for startup ...
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- angularJS+requireJS并集成karma测试实践
最近在为下一个项目做前端技术选型,Angular是必须要用的(BOSS指定,个人感觉也不错,开发效率会很高).由于需要加载的JS很多,所以打算看看angular和requirejs一起用会怎么样.在g ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1.入口页面 存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...
- angularJS+requireJS实现controller及directive的按需加载
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...
- requirejs整合ztree
{block name='script'} <script> require(['jquery.ztree'], function () { var zTreeObj; var setti ...
随机推荐
- Android推送使用--文章集锦
Android之基于百度云推送IM Android实现推送方式解决方案 Android消息推送(一)--AndroidPn(XMPP协议)Demo版到正式上线 采用XMPP协议实现Android推送 ...
- Java并发(9)- 从同步容器到并发容器
引言 容器是Java基础类库中使用频率最高的一部分,Java集合包中提供了大量的容器类来帮组我们简化开发,我前面的文章中对Java集合包中的关键容器进行过一个系列的分析,但这些集合类都是非线程安全的, ...
- C# using一般用法 (转)
using一般有着以下几种用法: 1.直接引入命名空间 a.using System ,这个是最常用的,就是using+命名空间,这样就可以直接使用命名空间中的类型,而免去了使用详细的命名空间 b.使 ...
- COGS2085 Asm.Def的一秒
时间限制:1 s 内存限制:256 MB [题目描述] “你们搞的这个导弹啊,excited!” Asm.Def通过数据链发送了算出的疑似目标位置,几分钟后,成群结队的巡航导弹从“无蛤”号头顶掠过 ...
- [POJ2954&POJ1265]皮克定理的应用两例
皮克定理: 在一个多边形中.用I表示多边形内部的点数,E来表示多边形边上的点数,S表示多边形的面积. 满足:S:=I+E/2-1; 解决这一类题可能运用到的: 求E,一条边(x1,y1,x2,y2)上 ...
- [转]如何整理Linux磁盘碎片,竟与Windows的方式大不同 返回操作系统首页
Linux 系统永远不需要整理磁盘碎片的神话相信很多人都听说过.由于 Linux 采用了优秀的日志文件系统(ext2.ext3.ext4, btrfs等),在绝大多数情况下确实是不需要进行磁盘碎片整理 ...
- memcached启动脚本(class练习)
说明:使用类的方式编写程序启动脚本(memcached) import time import os from subprocess import Popen,PIPE class Process(o ...
- time_t转化成日期格式小工具
time_t转化成日期格式小工具下载 http://files.cnblogs.com/files/lansan0701/TimeTool.zip
- Chrome扩展及应用开发
Chrome扩展及应用开发(电子书) http://www.ituring.com.cn/minibook/950 文档 官方 https://developer.chrome.com/extensi ...
- 搜索引擎--范例:谈谈django--mysql数据库的一些常用命令
现在基本没有什么能离得开数据库了,django我一直用的都是mysql的数据库,这次和大家说说django--mysql数据库的一些常用命令吧 1:命令行登陆mysql C:\Users\Admini ...