如何避免在使用ng-view時包含所有的.js和.css文件？

我們怎樣才能避免包括在所有的index.html和名爲.js .css文件就像這個例子：如何避免在使用ng-view時包含所有的.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鱈魚如上所述，將會有很多服務器請求並且可能無用（如果用戶不使用整個應用程序）。我無法想象谷歌沒有想到它。

來源

2014-09-21 Elfayer

使用像一飲而盡或呻吟，縮小/串連所有文件構建工具。 – 2014-09-21 19:13:57

真的沒有辦法避免包括所有？ – Elfayer 2014-09-21 19:19:07

您必須包含所有文件或將它們連接到一個。你可以嘗試使用requireJS，如果你確實只需要在index.html中包含一個js文件的話 – Siraj 2014-09-21 19:32:40