**AngularJS + RequireJS 整合详解**
在前端开发中，AngularJS 和 RequireJS 是两个非常重要的库。AngularJS 是一款强大的 MVVM（Model-View-ViewModel）框架，用于构建可维护、可测试的单页面应用程序。而 RequireJS 是一个模块化加载器，它使得 JavaScript 可以按照依赖关系进行异步加载，极大地提高了代码的组织性和执行效率。
**AngularJS 简介**
AngularJS 由 Google 维护，通过双向数据绑定、指令系统、依赖注入等特性简化了前端开发。它的核心设计理念是 MVC（Model-View-Controller），通过数据驱动视图，降低了开发者与DOM的交互复杂性。AngularJS 还提供了丰富的服务、过滤器和指令，帮助开发者构建复杂的Web应用。
**RequireJS 简介**
RequireJS 提供了一种AMD（Asynchronous Module Definition）规范，允许开发者编写模块化、异步加载的 JavaScript 代码。它解决了传统脚本加载时的阻塞问题，使得页面能够更快地加载并执行。RequireJS 还支持配置文件，可以管理模块间的依赖关系，提高代码的可维护性。
**整合 AngularJS 和 RequireJS**
将 AngularJS 与 RequireJS 结合，可以利用它们各自的优点，构建更加高效、模块化的前端应用。以下是整合步骤：
1. **安装依赖**
你需要通过 npm 和 bower 安装这两个库：
```
npm install
bower install
```
这两个命令将会安装 AngularJS 和 RequireJS，以及其他可能的依赖。
2. **配置 RequireJS**
在项目中创建一个 `main.js` 文件，作为 RequireJS 的配置文件。在这里，你需要指定 AngularJS 模块的路径和配置，例如：
```javascript
require.config({
baseUrl: './',
paths: {
'angular': 'path/to/angular.min',
'angular-route': 'path/to/angular-route.min'
},
shim: {
'angular': {'exports': 'angular'},
'angular-route': ['angular']
}
});
```
3. **引入 AngularJS 应用**
在 `main.js` 中，使用 `require` 引入 AngularJS 并启动应用：
```javascript
require(['angular', 'angular-route'], function(angular) {
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
// 路由配置
});
angular.bootstrap(document, ['myApp']);
});
```
4. **模块化控制器和服务**
使用 RequireJS，你可以为每个 AngularJS 的控制器和服务创建单独的模块。例如，创建一个名为 `controllers/homeCtrl.js` 的文件来定义 Home 控制器：
```javascript
define(['angular'], function(angular) {
return angular.module('myApp').controller('HomeCtrl', function($scope) {
// 控制器逻辑
});
});
```
5. **设置 Grunt 或 Gulp 工具**
为了自动化构建过程，可以使用 Grunt 或 Gulp。在这个例子中，我们使用 Grunt。在 `Gruntfile.js` 中配置 `watch` 任务，以便在文件改动时自动编译和刷新浏览器：
```javascript
grunt.initConfig({
watch: {
js: {
files: ['**/*.js'],
tasks: ['requirejs'],
options: {
livereload: true
}
}
},
requirejs: {
compile: {
options: {
mainConfigFile: 'main.js',
out: 'app.min.js'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-requirejs');
grunt.registerTask('default', ['watch']);
```
6. **运行服务器**
使用 Node.js 运行 `server.js`，这通常是一个简单的静态文件服务器，用于在开发过程中提供本地环境：
```
node server.js
```
现在，你的项目已经集成了 AngularJS 和 RequireJS，并配置好了自动化构建工具。通过这种方式，你可以享受到模块化加载的优势，同时利用 AngularJS 的强大功能构建动态、交互式的前端应用。继续探索 AngularJS 和 RequireJS 的更深层次的应用，如路由、服务、过滤器和指令，可以让你的代码结构更加清晰，提升开发效率。
angular-requirejs-master.zip （46个子文件） 
angular-requirejs-master 
-deployd.1 32MB
index.html 598B
