requirejs+angularjs＋grunt-contrib-requirejs 纯手敲 干货
楼主 没有把ng-view用上，因为很多小白们本地server是个什么还不知道那，不用本地server ng-view浏览器是报错的，这个后续文章在介绍，这次主要是把requirejs怎么配置加载angularjs各个模块的
《使用AngularJS开发下一代WEB应用》第三章上面得例子我觉得讲的太笼统，可能楼主 确实是笨了那么一点点点点点..................
首先angular得项目目录：
神马？楼主也用grunt? 你没看错，文章的最后我会稍微介绍下grunt的插件grunt-contrib-requirejs，grunt嘛楼主今天刚学会......所以就先不写出来装X了，网上grunt的文章很多的，但是坑还是有的。
requirjs+angularjs的项目暂时只打包js文件，至于打包模版和css image楼主晚上回家在试试。
介绍 grunt-contrib-requirejs 的文章不多，我会站在一个小白的角度写出来会更好理解(我猜)那么一点点点。
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="test" ng-controller="myConCon">
login : {{login}}
</div>
</body>
</html>
<!-- './js/main' 为requirejs的配置文件-->
<script type="text/javascript" data-main="./js/main" src="./js/lib/require.js"></script>
main.js
requirejs.config({
//baseUrl 为加载文件的默认路径
//不写默认路径用grunt打包的时候很容易报错找不到文件
//此处的 ./js 是相对于index.html的
baseUrl : './js',
'paths' : {
//有了baseUrl 所以此地方的路径就代表 项目根路径下的js/lib/jquery.js
//同为js文件的话.js可以省略
jquery : 'lib/jquery',
angular : 'lib/angular'
},
shim : {
//此位置只为不支持AMD写法的js文件
angular : {
//表示加载angularjs的依赖，会先加载jquery
deps : ['jquery'],
//全局输出变量其他文件引用angularjs后就引入了此全局变量
//比如下面的 requeirjs([],function(){})方法内
exports : 'angular'
},
jq : {
exports : '$'
}
}
});
//上面为 配置requirjs 是个config,真正加载文件从这requiejs()函数开始
//main.js 内一般都是放的 整个项目的依赖包比如 jquery angular等
//app.js文件 为项目的 根 ng-app(..好难表达 00 !)
requirejs([
//此处会按照 requirejs.config的paths路径和deps依赖关系加载
'angular',
'jquery',
'app'
], function (angular, $, app) {
//jquery方法 dom ready
$(function () {
//通过angularjs的内置方法给 html加上ng-app="myApp"指令
//angularjs 通过ng-app设置作用边界
angular.bootstrap(document,['myApp']);
})
})
app.js
define([
//此处define()加载文件也会按requirejs.config的paths加载
'angular',
//myCon.js 文件不是整个项目的依赖包
//所以在需要的js里加载就可以了无需在requirejs.config配置(AMD按需动态加载)
//此处的加载路径是按 baseUrl配置的路径 ./js/controller/myCon.js
'controller/myCon'
], function (angular) {
//angular.module()通过第二个参数 加载其他文件的 angular.module
var myApp = angular.module('myApp', ['myCon']);
return myApp;
});
mySer
define(['angular'], function (angular) {
angular.module('mySer', [])
.factory('mySerSer', function () {
return {
name : 'world!'
}
});
})
myCon
define([
//加载同app类似了
'angular',
'service/mySer'
], function (angular) {
angular.module('myCon', ['mySer'])
//此处 'mySerSer'只有在上面创建module时 传了参数['mySer'](加载此module)才可用
.controller('myConCon', ['$scope', 'mySerSer', function ($scope, mySerSer) {
$scope.login = mySerSer.name;
}])
//想用别的module的自定义服务 'mySerSer' 需要4步
//1 require([]) 中括号内先加载此文件
//2 angular.module('xxx', ['mySer']) 加载含有mySerSer自定义服务的angular.module
//3 在controller('xx', [])第二个参数(数组)内 传入需要的自定义服务名称 mySerSer
//4 []数组的回调函数内 写入mySerSer的形参，顺序一一对应
})
运行后：
今天下午大体看了下grunt打包的方法
当然开始先搜了下资料，关于grunt-contrib-requirejs gitHub上倒是有api,我觉的还是讲的不够细致，所以稍微注视一下代码：
Gruntfile.js
module.exports = function(grunt){
//grunt的配置我就不叨叨了 自己看官网就ok了
//我就介绍下grunt的依赖插件grunt-contrib-requirejs
//专门打包requeirjs项目的
grunt.initConfig({
//此处的requirejs的配置和requeirjs.config要区分开，那个是requeirjs项目加载配置
//这个是 grunt-contrib-requirejs打包配置
requirejs: {
build: {
options: {
//此处是文件Gruntfile的相对位置
appDir: './app',
//设置默认路径 ./app/js
baseUrl : 'js',
//设置压缩后的路径 ./build
dir: './build',
//这里paths 是被打包文件所需要的依赖文件以及被打包的文件
/*
./app/js/main.js下的代码
requirejs([
'angular',
'jquery',
'app'
], function (angular, $, app) {
......
})
*/
//需要三个angular jquery app
//那么 其他的呢？ 其他的模块会按照依赖关系也被打包进去
//比如 app需要 ./app/js/controller/myCon.js grunt就自动把他打包进去了
//我们只管 被打包的文件和此文件requirejs()函数加载的依赖 ....楼主好啰嗦
paths: {
'jquery': 'lib/jquery',
'angular': 'lib/angular',
'app' : 'app',
'main' : 'main',
},
//requiejs.config里面配置了依赖关系和全局变量那为什么这还需要配置
//因为 打包后代码的变量将被替换只有a b c d类似简单的变量了
//那 angularjs自定义模块(比如myCon.js)就报undefined了
//此处配置了，打包后就不报错了，grunt-contrib-requirejs给在中间转了一下
shim: {
angular : {
deps : ['jquery'],
exports : 'angular'
},
jquery : {
exports : '$'
}
},
//此处的modules就是要打包的文件(模块)
//我们例子项目因为通过main.js就把整个项目模块 关联了起来
//main ->angular+jquery+app ->myCon->mySer
//所以我只打包main.js grunt就自动把其他依赖文件按依赖关系(顺序)打包进去
modules: [{
name: 'main'
}]
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('merge', ['requirejs']);
}
看此时浏览器 只加载main.js了把，main.js把所需要的依赖文件都打包进去了
main.js里面的代码
源码地址：click here
当然我的github还很荒凉。。。要加把劲了