angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些
<body>
<span ng-controller="homeController">{{resultValue.Msg}}</span>
<script src="js/lib/require.js" data-main="js/main"></script>
</body>
###只不过需要手动启动angularjs,同时所有的模块由requirejs来组织并确定依赖关系,这样就能实现按需加载了
```js
/**
* main.js
* 这个文件完成的事情简单来说就是:载入所有文件,然后在document上运行Angular并将ng-app属性设置为’app’。
* 这些文件因为是由RequireJS异步载入,因此我们需要来“手动启动”Angular应用。
*
* */
require.config({
paths: {
//库文件
//"responsive": "lib/responsive-nav",
"angular": "lib/angular",
"bootstrap": "lib/bootstrap.min",
"angularRoute": "lib/angular-route",
"angularResource": "lib/angular-resource",
//"ui-bootstrap": "lib/ui-bootstrap-tpls-0.11.0.min",
//"phprpc": "lib/phprpc_client",
"jquery": "lib/jquery.min"
},
shim: {
angular: {
exports: "angular"
},
angularRoute: {
deps: ["angular"]
},
angularResource: {
deps: ['angular']
}
},
urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存,调试用
});
//手动启动ng
define(["routes"], function () {
//使用bootstrap方法启动Angular应用
angular.bootstrap(document, ["app"]);
});
```js
/**
* routes.js
*/
define([
"app"
], function (app) {
//app是Angular应用对象
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/search', {
templateUrl: 'template/search.html',
controller: 'SearchCtrl'
})
.otherwise({ redirectTo: '/LmpSumQut' });
}]);
})
###其他的模块代码略了,看参考链接:
http://blog.csdn.net/yo548720570/article/details/41047309
http://www.open-open.com/lib/view/open1413189699875.html
https://segmentfault.com/a/1190000000492238
http://www.cnblogs.com/kenkofox/p/4643760.html
http://www.tuicool.com/articles/J3INv2Z
http://blog.163.com/liuyong_xiaxia/blog/static/17435525520156341446981/
angularjs集成requirejs的更多相关文章
- AngularJS与RequireJS集成方案
关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianContr ...
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- Integrating AngularJS with RequireJS
Integrating AngularJS with RequireJS When I first started developing with AngularJS keeping my contr ...
- AngularJS - 使用RequireJS还是Browserify?
http://www.html-js.com/article/2126 AngularJS - 使用RequireJS还是Browserify? AngularJS之所以吸引了很多开发者的关注,很大一 ...
- AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service
一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...
- angularjs backbone 集成requirejs 模块化
首先认识requirejs requirejs是个包加载器,核心功能是模块化管理,可以实现按需加载. 重点是明白 模块化不是按需加载. 模块化的意义: 是通过代码逻辑表明模块之间的依赖关系和执行顺序, ...
- AngularJS结合RequireJS做文件合并压缩的那些坑
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...
- Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...
- angularJS和requireJS和angularAMD
最近因为要用到angularJS开发项目,因为涉及到的静态资源比较多,所以想把js文件通过requireJS来按需加载,这两个框架以前都使用过,但是结合到一起还没有用过,那就试一下,看能否达到目的. ...
随机推荐
- C语言 · 高精度加法
问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...
- Jade模板引擎让你飞
写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...
- solr_架构案例【京东站内搜索】(附程序源代码)
注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...
- video.js
1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...
- angular2系列教程(七)Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 【HanLP】HanLP中文自然语言处理工具实例演练
HanLP中文自然语言处理工具实例演练 作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...
- 在centos7上安装ClamAV杀毒,并杀毒(centos随机英文10字母)成功
前言 上传文件的时候发现总是失败,查看top发现有个进程一直cpu占用80%以上,而且名称还是随机数.kill之后,一会儿又重新生成了.突然发现居然没有在服务端杀毒的经历.在此处补齐. 安装clama ...
- 深入理解javascript的getTime方法
1.理解getTime getTime() 方法返回一个时间的格林威治时间数值. 可以使用这个方法把一个日期时间赋值给另一个Date 对象. 语法: dateObj.getTime() 参数: 无. ...
- C#与C++通信
# C#与C++相互发送消息 # ## C#端: ## namespace CshapMessage { /// /// MainWindow.xaml 的交互逻辑 /// public partia ...
- EC笔记:第4部分:21、必须返回对象时,别返回引用
使用应用可以大幅减少构造函数与析构函数的调用次数,但是引用不可以滥用. 如下: struct St { int a; }; St &func(){ St t; return t; } 在返回t ...