title: AngularJS home page performance concern
body: <p>I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/common/icomoon.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/app.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/header.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/menu.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/carousel.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/pdp.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/pdp_751_1.css"&gt;
  
  &lt;script src="js/lib/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/jquery.cycle.all.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/jquery.touchwipe.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;!-- This is the route provider for the main app... --&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/c-home.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/c-browse.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/c-product-details.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src="js/directives/directives.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="js/directives/d-product-details.js"&gt;&lt;/script&gt;
  &lt;script src="js/services/s-home.js"&gt;&lt;/script&gt;
  &lt;script src="js/services/s-browse.js"&gt;&lt;/script&gt;
  &lt;script src="js/services/s-product-details.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/angular/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/ui-bootstrap-tpls-0.1.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/lib/iscroll.js"&gt;&lt;/script&gt;
  </code></pre>