我是 AngularJS 的新手，正在尝试构建一个移动 Web 应用程序。当我开始为各种功能编写控制器、服务和路由时，index.html JS 和 CSS 包含的似乎每天都在增长。例如，当我开始编写控制器时，任何功能的服务都被迫将它们包含在 index.html 中。我认为编码方法存在根本问题。如果我的主页路径是“/home”或“/”，那么 home.html 应该只下载与主页相关的 JS 和 CSS 文件。但是 home.html(view) 似乎为每个页面下载了整个 Javascript 和 CSS 库。我应该如何设计我的应用程序，以便只为页面下载与功能相关的控制器、服务、指令 Javascript 文件。如果有人能用一个简单的例子来解释，我将不胜感激。
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>