第三章 RequireJS && AngularJS章节 1/3

Chapter3.markdown

@@ -496,5 +496,94 @@ Yeoman使它变得更容易(如果你相信它). 每当你使用Yeoman生成一
 
 	yeoman build
 
-Yeoman不支持压缩文件, 但是它很快会到来, 根据来发者提供的ixnxi.
+Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会到来.
 
+##使用RequireJS整合AngularJS
+
+如果你提单做好更多的事情, 正好会让你的开发环境更简单. 后期修改你的开发环境, 会需要修改更多的文件. 依赖管理和创建包部署是任何规模的项目所忧虑的.
+
+使用JavaScript设置你的开发环境是相当困难的, 因为它涉及Ant构建维护, 连接你的文件来构建脚本, 压缩它们等等. 值得庆幸的是, 在不久之前已经出现了像RequireJS这样的工具, 它允许你定义和管理你的JS依赖关系, 以及将他们挂到一个简单的构建过程中. 随着这些异步加载管理的工具诞生, 能够确保所有的依赖文件在执行之前加载好, 重点工作可以放在实际的功能开发, 在此之前从未如此简单过.
+
+值得庆幸的是, AngularJS能够很好的发挥[RequireJS](http://requirejs.org/), 因此你可以做到两全其美. 这里有一个目标示例, 我们找到了在一个系统中能够工作的很好而且易于遵循的方式来提供一个样本设置.
+
+让我们一起来看看这个项目的组织(类似前面描述的骨架, 稍微有一点变化):
+
+1. **app**: 这个目录是所有显示给用户的应用程序代码宿主目录. 包括HTML, JS, CSS, 图片和依赖的库.
+
+    a. /**style**: 包含所有的CSS/Less文件
+
+    b. /**images**: 包含项目的所有图片文件
+
+    c. /**script**: 主AngularJS代码库. 这个目录也包括我们的引导程序代码, 主要的RequireJS集成
+
+        i. /**controllers**: 这里是AngularJS控制器
+        
+        ii. /**directives**: 这里是AngularJS指令
+
+        iii. /**filters**: 这里是AngularJS过滤器
+
+        iv. /**services**: 这里是AngularJS服务
+
+    d. /**vendor**: 我们所依赖的库(Bootstrap, RequireJS, jQuery)
+
+    e. /**views**: 视图的HTML模板部分和项目所使用的组件
+
+2. **config**: 包含单元测试和场景测试的Karma配置
+
+3. **test**: 包含应用程序的单元测试和场景测试(整合的)
+
+    a. /**spec**: 包含应用程序的JS目录中的单元测试和镜像结构
+
+    b. /**e2e**: 包含端到端的场景规范
+
+我们所需要做的第一件事情是在`main.js`文件(在app目录)中引入RequireJS, 然后使用它加载所有的其他依赖项. 这里有一个例子, 我们的JS项目除了自己的代码还会依赖于jQuery和Twitter的Bootstrap.
+
+	//the app/scripts/main.js file, which defines our RequireJS config
+	require.config({
+		paths: {
+			angular: 'vendor/angular.min',
+			jquery: 'vendor/jquery',
+			domReady: 'vendor/require/domReady',
+			twitter: 'vendor/bootstrap',
+			angularResource: 'vendor/angular-resource.min'
+		},
+		shim: {
+			'twitter/js/bootstrap': {
+				deps: ['jquery/jquery']
+			},
+			angular: {
+				deps: ['jquery/jquery', 'twitter/js/bootstrap'],
+				exports: 'angular'
+			},
+			angularResource: {
+				deps: ['angular']
+			}
+		}
+	});
+
+	require([
+		'app',
+		//Note this is not Twitter Bootstrap
+		//but our AngularJS bootstrap
+		'bootstrap',
+		'controllers/mainControllers',
+		'services/searchServices',
+		'directives/ngbkFocus'
+		//Any individual controller, service, directive or filter file
+		//that you add will need to be pulled in here.
+		//This will have to be maintained by hand.
+		],
+		function(angular, app){
+			'use strict';
+
+			app.config(['$routeProvider',
+				function($routeProvider){
+					//define your Routes here
+				}
+			]);
+		}
+	);
+
+然后我们定义一个`app.js`文件. 这个文件定义我们的AngularJS应用程序, 同时告诉它, 它依赖于我们所定义的所有控制器, 服务, 过滤器和指令. 我们所看到的RequireJS依赖列表中所提到的只是一点点.
+
+你可以认为RequireJS依赖列表就是一个JavaScript的import语句块. 也就是说, 代码块内的函数直到所有的里来列表都满足或者加载完成它都不会执行.