【发布时间】：2014-09-22 16:54:17
【问题描述】：
我们如何避免在 index.html 中包含所有 .js 和 .css 文件，就像这个例子：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<base href="/">
<meta charset="utf-8">
<title>ShowTrackr</title>
<link href="favicon.png" rel="icon" type="image/png">
<link href='http://fonts.googleapis.com/css?family=Roboto|Montserrat:400,700|Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="//cdn.jsdelivr.net/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="stylesheets/animate.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="/">
<span>Show<strong>Trackr</strong></span>
</a>
</div>
<ul class="nav navbar-nav">
<li data-match-route="/$"><a href="/">Home</a></li>
<li data-match-route="/add"><a href="/add">Add</a></li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="!currentUser">
<li data-match-route="/login"><a href="/login">Login</a></li>
<li data-match-route="/signup"><a href="/signup">Sign up</a></li>
</ul>
<ul class="nav navbar-nav pull-right" ng-if="currentUser">
<li class="navbar-text" ng-bind="currentUser.email"></li>
<li><a href="javascript:void(0)" ng-click="logout()">Logout</a></li>
</ul>
</div>
<div ng-view class="{{pageClass}}"></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="vendor/moment.min.js"></script>
<script src="app.js"></script>
<script src="filters/fromNow.js"></script>
<script src="directives/uniqueEmail.js"></script>
<script src="directives/passwordStrength.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/signup.js"></script>
<script src="services/auth.js"></script>
<script src="services/show.js"></script>
<script src="services/subscription.js"></script>
<!--<script src="app.min.js"></script>-->
<!--<script src="templates.js"></script>-->
</body>
</html>
这段代码来自这个github：https://github.com/sahat/tvshow-tracker
代码用于教程：http://sahatyalkabov.com/create-a-tv-show-tracker-using-angularjs-nodejs-and-mongodb/
我想做类似的事情：
angular.module("MyApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
/*
Here say to include in the same time specific .js
(for example the one who contain the 'homeCtrl' controller) and .css
*/
});
}]);
因为上面的 html 代码，会有很多服务器请求并且可能无用（如果用户不使用整个应用程序）。我无法想象 Google 没有想到这一点。
【问题讨论】：
-
使用 gulp 或 grunt 之类的构建工具并缩小/连接所有文件。
-
真的没有办法避免包含所有吗？
-
您必须包含所有文件或将它们合并为一个。如果你真的只需要在 index.html 中包含一个 js 文件，你可以尝试使用 requireJS
-
我对此的看法是 angular-require-lazy，使用 Require.js 和 r.js 进行构建，require-lazy 将不同的视图连接到单独的包中。它仍在开发中，远未完成，但您可能（或可能不会）得到一个想法。
-
感谢您的提示！但这很奇怪，谷歌没有想到什么。我的意思是在一个巨大的应用程序中，可能有超过数百个包含...特别是如果我们通过文件编写一个指令/控制器/...。