如何将angularJs项目与requireJs集成
关于angularjs、requirejs的基础知识请自行学习
一、简单事例的项目目录如下：
-index.html
-scripts文件夹
--controller文件夹
--- mianController.js
--- controller1.js
---controller2.js
--directives文件夹
---mainDirective.js
---directive.js
--app.js
--router.js
--main.js
二、首页
首先你的index.html大概如下
<!doctype html>
<!-- <html xmlns:ng="//angularjs.org" id="ng-app" ng-app="webApp"> -->
<htmls>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head> <body>
<!--其他html内容-->
<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
</body>
</html>
在首页index.html只需要引入requireJs库文件，并且指明入口函数main.js，采用手动启动angularjs应用，所以这里不用为首页添加ng-app='webApp'。
三、配置mian.js
require.config({
paths:{
//一些库文件
'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
//js文件
'bootstrap': "../scripts/bootstrap",
'app': "../scripts/app",
'router': "../scripts/router"
.....以及其他的js文件，这里省略
},
shim:{
'angular':{
exports:'angular'
},
'angular-route':{
deps:['angular'],
exports: 'angular-route'
}
},
deps:['bootstrap'],
urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存，调试用
});
关于require.config()中的配置大概如下（依照自己的项目情况，这里我简单配置了），
所以总体上说main.js这个文件做的事情就是：由requirejs异步载入所有文件
注意到其中的deps：['bootstrap']，就是告诉我们要先加载bootstrap.js文件。
四、手动启动angularjs应用
而bootstrap.js就是我用来手动启动angularjs应用的，代码如下
define(['require',
'angular',
'angular-route',
'jquery',
'app',
'router'
],function(require,angular){
'use strict';
require(['domReady!'],function(document){
angular.bootstrap(document,['webapp']);
});
});
这里依赖于app.js和router.js，我们看看这两个文件分别做什么
五、网站路由设置
我们这里使用ui-router。所以我们的router.js应该是这样的，主要是用来定义路由的，关于ui-router的配置请自行查看相关知识，这里就简单略过
define(["app"],
function(app){
return app.run([
'$rootScope',
'$state',
'$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams
}
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){
//用于改变state时跳至顶部
$uiViewScrollProvider.useAnchorScroll();
// 默认进入先重定向
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
//abstract: true,
url:'/home',
views: {
'main@': {
templateUrl: '../view/home.html'
}
}
})
})
六、angular.module
这时先看看平时我们在写angularjs应用是这样写的
var app = angular.module("xxx",["xxx"]);
app.controller("foo",function($scope){});
app.directive(...)
所以我们的app.js应该是这样的
define(["angular",
'mainController',
'mainDirective'
],function(angular){
return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']);
})
其中我们的app.js中依赖的mainController和mainDirective主要是用来加载angular的控制器和指令
七、控制器
我们的mainController.js是这样的
define(['controller1','controller2'],function(){});
主要用来加载各个控制器（所有的控制器都将在这个文件中被加载）,除此之外再不用做其他，因为我们可以有很多个控制器文件，按照具体需要进行添加。
controller1.js文件(其他控制器controller2文件类似)
define(['../scripts/controller/module.js','jquery'],function(controllers,$){
'use strict';
controllers.controller('controller1',function($scope){
//控制器的具体js代码
})
})
其中依赖module.js
而module.js如下
define(['angular'], function (angular) {
'use strict';
return angular.module('webapp.controllers', []);
});
八、指令
同理mianDirective.js也类似。参考控制器
九、其他
如何将angularJs项目与requireJs集成的更多相关文章
- 【转】Yeoman自动构建 Angularjs 项目
Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...
- AngularJs项目
AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularj ...
- angularJs项目实战！01：模块划分和目录组织
近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...
- 基于 flow.ci 实现 PHP 项目自动化持续集成
高效程序员的习惯之一--让开发流程自动化.Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导.无论你是否使用过持续集成, ...
- 3 分钟轻松搭建 Ruby 项目自动化持续集成
任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这是一篇关于 Ruby 项目持续集成的快速指导教程,教大家如何使用 f ...
- 使用Yeoman快速启动AngularJS项目开发
本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...
- Atitit.mybatis的测试 以及spring与mybatis在本项目中的集成配置说明
Atitit.mybatis的测试 以及spring与mybatis在本项目中的集成配置说明 1.1. Mybatis invoke1 1.2. Spring的数据源配置2 1.3. Mybatis ...
- AppVeyor-CI为GitHub项目做自动化集成（dotnet为主）
travis-ci对dotnet的项目做自动化集成不太友好,尤其是使用mono的编译和不能使用MSTest进行自动化测试,所以转到appveyor进行. appveyor的配置非常简单,有两种方式: ...
- angularJs项目实战！02：前端的页面分解与组装
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...
随机推荐
- Google java编程技术规范
不遵循规范的程序猿,不是好的coder. 学习java有一段时间了,一直想找java编程技术规范来学习一下,幸而网络资源丰富,各路玩家乐于分享,省去了好多麻烦,姑且算站在网友的肩上,砥砺前行. /** ...
- js 介绍
createjs 工作内容:html5游戏开发岗位要求:1. 熟悉HTML5特性, 掌握canvas开发技能;2.能独立的搭建出易扩展,高效,强壮,通用的前端底层框架;3.熟悉常用的JS开发框架或工具 ...
- Java使用java命令运行程序出现：找不到主类错误
这是配置环境的问题. 在classpath里面添加 .; 即:点+分号 为什么呢,点代表当前目录.
- ASP.NET Web API 2 入门(一)
前言 HTTP 不是只是为了服务的 web 页.这也是建设公开服务和数据的 Api 的强大平台.HTTP 是简单的. 灵活的和无处不在.你能想到的几乎任何平台有 HTTP 库,因此,HTTP 服务可以 ...
- java中的单例模式与doublecheck
转自: http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单 ...
- [转贴]怎样在LINQ实现 LEFT JOIN 或者RIGHT JOIN
In this post let us see how we can handle Left Join and Right Join when using LINQ. There are no key ...
- 【Xamarin开发 Android 系列 1】环境部署搭建
原文:[Xamarin开发 Android 系列 1]环境部署搭建 开篇自然先扯一段,近几年移动互联网如果熊猫零食一样,蔓延迅速.楼主身为一个微软忠实的粉丝,无奈,老爹不给力.Silverlight开 ...
- Android 图片比较
Android中图片比较大致的流程如下: 将Drawable对象转化成Bitmap对象.(实际比较的是Bitmap对象,假设为B1和B2) 将B1和B2中的像素取出,分别放在2个数组中.(实际存储的是 ...
- Android ListView中 每一项都有不同的布局
实现代码 Adapter的代码 其中:ViewHolder分别是三个不同的布局,也就是ListView中每一项的布局 TYPE_1...是三种类型. 在使用不同布局的时候,getItemViewTyp ...
- vs2010 dll生成，使用问题[good]
VS2010 动态库开发——第一章 演练:创建和使用动态链接库 (C++) 转载自[http://www.cnblogs.com/sdlypyzq/archive/2012/01/17/2324215 ...