Question

我是AngularJS的新手，正在尝试构建一个Mobile 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>

Answer 1

您不必过多担心文件的有效负载大小，而是更多关于构建过程并确保尽可能减少HTTP请求（1 css，1 js就是您家中应该拥有的所有内容）。 HTML）。这更重要。也缩小一切。我建议你查看ng-boilerplate。它是角度应用程序的起点，并且具有您应该使用的大多数最佳实践。

https://github.com/joshdmiller/ng-boilerplate

确保阅读各个目录级别的所有自述文件。

AngularJS主页表现值得关注

1 个答案: