引导程序未在角度部分页面上加载答案

【问题标题】：bootstrap not loading on angular partial page引导程序未在角度部分页面上加载
【发布时间】：2017-12-12 01:42:36
【问题描述】：

我在处理几个不同的页面时遇到了这个问题。我将提供一个简单的例子。我对前端工作不是很满意，如果我的 html 页面难以阅读，我深表歉意。

我有一个有角度的单页应用程序，它的标题栏占据 100 像素，然后部分页面被路由到它下面。

我的index.html

<html>
<head>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">-->
  <link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
  <link rel="stylesheet" type="text/css" href="./stylesheets/index.css">
</head>

<body data-ng-app="angulobby" data-ng-controller="indexController">
<div id="container">
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AnguLobby Prototype</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
          <li><a href="/login"><i class="fa fa-shield"></i> Login</a></li>
          <li><a href="/register"><i class="fa fa-comment"></i> Register</a></li>
          <div ng-controller="logoutController">
            <a ng-click='logout()' class="btn btn-default">Logout</a>
          </div>
        </ul>
      </div>
    </nav>
  </header>
  <!--injected views go here-->
  <div id="ng-view" ng-view></div>
</div>
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="./socket.io/socket.io.js"></script>
<script src="./main.js"></script>

<!--expose angular controllers-->
<script src="controllers/home.js"></script>
<script src="controllers/index.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/logout.js"></script>
<script src="controllers/register.js"></script>
<script src="controllers/select-params.js"></script>
<script src="controllers/queueTimer.js"></script>
<script src="controllers/lobby.js"></script>

<!--expose angular services-->
<script src="./services/auth.js"></script>
<script src="./services/gamelist.js"></script>
<script src="./services/queue.js"></script>
<script src="./services/socket.js"></script>
<script src="./services/lobby.js"></script>
</body>
</html>

和index.css

html, body {
  height: 100%;
}
#container {
  height:100%;
  display:flex;
  flex-flow:column;
}

#ng-view {
  overflow: hidden;
}

header {
  height: 100px;
}

然后例如，如果我有一个简单的部分页面，我想注入到 ng-view 中：

lobby.html

<head>
  <link rel="stylesheet" type="text/css" href="../stylesheets/lobby.css">

</head>

<div id="lobby-container" class="container">
  <div class="container">
    <div class="row">
      <div id="chat" class="col-md-2">
      </div>
      <div id="users" class="col-md-2"></div>
    </div>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
  </script>
</div>

和lobby.css

#lobby-container {
  background-color: greenyellow;
  height: 100%;
  width: 100%;
}

#chat {
  background-color: grey;
  height: 100%;
}

#users {
  background-color: darkblue;
  height: 100%;
}

当我自己加载部分页面时，不会执行引导程序。它显示了两个没有 col 类属性的 div。

但是，当我构建项目时，会加载引导程序。

我知道一般问题是部分视图仅在 Angular 实际将它们注入 ng-view 时才从 index.html 添加引导程序。我想做的是能够预览每个部分页面并已经加载引导程序而不必每次都构建项目。如果这很重要，我正在使用 webstorm IDE。

【问题讨论】：

您还需要包含部分的引导标头。它应该工作顺利。所以你需要做的就是在部分页面中包含标题、css、js等。
@ShaurabhBharti 如果您查看我的 lobby.html 页面，我想我是通过添加 <script> 标记和 CDN 链接来实现的。是不是执行不正确？
@RyanPage 将<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 添加到lobby.html 头部
@DanielH 非常感谢，解决了问题！
很高兴它成功了 :)

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

好的，刚刚想通了。我已经添加了 bootstrap.js 文件，但忘记添加 bootstrap.css 文件。添加 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

到lobby.html 的<head> 解决了这个问题。

【讨论】：