Angularjs 如何避免在使用ng view时包含所有.js和.css文件？_Angularjs_Ng View

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

angularjs

Angularjs 如何避免在使用ng view时包含所有.js和.css文件？,angularjs,ng-view,Angularjs,Ng View,我们如何避免在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

我们如何避免在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>

因为有了上面的html代码，将会有大量的服务器请求，而且可能是无用的（如果用户不使用整个应用程序）。我无法想象谷歌没有想到这一点。

您可以在视图中内联CSS和JS代码。如果视图是可缓存的，那么这不是一个大问题

你可能想看看

使用gulp或grunt等构建工具，缩小/连接所有文件。是否真的没有办法避免包含所有文件？您必须包含所有文件或将它们合并为一个文件。如果您真的需要在index.htmlMy中只包含一个js文件，您可以尝试使用requireJS，这就是使用Require.js和r.js进行构建，并将不同的视图连接到单独的包中。它仍在开发中，远未完成，但您可能会（也可能不会）有想法。谢谢您的提示！但奇怪的是谷歌竟然没有想到这一点。我的意思是，在一个巨大的应用程序中，可能会有数百个包含项。。。特别是如果我们写一个指令/控制器/。。。按文件。

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
            */
        });
    }]);