Page 470 - AngularJS权威教程

450 第 34 章 下一步

图34-4 Yeoman生成的目录结构

Yeoman创建的目录结构构建了app/和test/目录。在app目录内，将会用来构建Angular应用和
存放视图、样式和应用程序的其他部分。
当我们想要创建一个控制器时，需要添加一个带有描述名称的文件到控制器目录。然后还需
要确保在index.html中引入它作为文件加载。

例如，添加一个仪表盘控制器时，将会创建app/scripts/controllers/dashboard.js和Dashboard-
Controller定义：
'use strict';

// 在 app/scripts/controllers/dashboard.js中
angular.module('myappApp')
.controller('DashboardController', function($scope) {
});
为了引入这个控制器，需要让应用程序在index.html中加载这个文件。还需要确保在应用内
的构建注释中引入它，这样htmlmin任务才会在压缩HTML时引入它。
<!-- build.js({.tmp, app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/dashboard.js"></script>
<!-- endbuild -->
这样就可以在应用中使用这个控制器了。这个过程可用于将在应用中使用的各类Angular组
件（例如服务、过滤器和指令）。
如果将应用分离为多个组件（强烈推荐）作为应用的依赖，需要确保在上面的app.js文件之
前引入这些组件。例如，如果遵循多模块模式将会为每个组件生成一个新模块：

// 在app/scripts/services/api.js中
angular.module('myApp.services', [])
.factory('ApiService', function() {
return {};
});
然后设置这些模块作为应用的依赖：

// 在app.js中
angular.module('myApp', ['myApp.services']);