Question

我遇到过这个问题，我正在处理几个不同的页面。我将提供一个简单的例子。我对前端工作不太满意，所以如果我的html页面难以阅读，请为此道歉。

我有一个有角度的单页应用程序，其标题栏占用100px，然后部分页面在其下面路由。

我的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。

Answer 1

好的，只是搞清楚了。我添加了bootstrap.js文件，但忘了添加bootstrap.css文件。添加 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

bootstrap没有加载角度部分页面

1 个答案: