Fatal编程技术网
  • javascript/
  • Javascript 引导程序未加载到部分页面

Javascript 引导程序未加载到部分页面

javascript html css angularjs twitter-bootstrap

Javascript 引导程序未加载到部分页面,javascript,html,css,angularjs,twitter-bootstrap,Javascript,Html,Css,Angularjs,Twitter Bootstrap,我有两个不同的页面，我一直在工作这个问题。我将提供一个简单的例子。我对前端工作不太满意，所以如果我的html页面难以阅读，我深表歉意 我有一个有角度的单页应用程序，它的标题栏占据了100px，然后部分页面被路由到它下面 我的index.html <html> <head> <base href="/"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angul

我有两个不同的页面，我一直在工作这个问题。我将提供一个简单的例子。我对前端工作不太满意，所以如果我的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>

<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>
然后，例如，如果我有一个简单的部分页面，我想将其注入ng视图：

lobble.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>

<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>
当我自己加载部分页面时，不会执行引导。它显示两个没有col类属性的div。

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

我知道一般的问题是，当angular实际将部分视图注入ng视图时，它们只能从index.html中添加引导。我想做的是能够预览每个部分页面，并已加载引导，而无需每次构建项目。如果有必要的话，我正在使用webstorm IDE

好吧，我想起来了。我添加了bootstrap.js文件，但忘记添加bootstrap.css文件。添加

到
lobb.html的
解决了这个问题
 您还需要为partials包含引导头。它应该工作顺利。因此，您所需要做的就是在部分页面中包含标题、css、js等。@ShaurabhBharti如果您查看我的lobb.html页面，我想我是通过添加
标记和CDN链接实现的。这是否执行错误？@RyanPage将
添加到
lobb.html
head@DanielH非常感谢，这解决了问题！很高兴它成功了：）