Question

我目前正在为我的学校开设图书馆簿记服务。我正在使用Electron创建一个实际上是一个网站，然后将其编译成一个跨平台的应用程序。但是，我遇到了角度路由的早期问题。我计划使用角度导航，因为它删除了切换页面之间的白色缓冲区，在这个应用程序中，我打算经常切换页面。

到目前为止，这是我的主屏幕，内部动画在没有ng-view容器的情况下工作正常，但是当我放置ng-view容器，动画和整个页面时链接不起作用完全看起来很冷。另外引用路由的根文件夹似乎对我不起作用，所以我不得不使用../来上传一个文件夹。

这是我的代码。

＆＃13;

var app = angular.module("Librain", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "../HomePage/homePage.html"
    })
    .when("/people", {
      templateUrl: "../MembersPage/members.html"
    })
});

＆＃13;

body {
  background-color: #83DDF7;
  margin: 0;
  padding: 0;
  /*Sets to fill background*/
  min-height: 800px;
  min-width: 1024px;
  /*Sets up scaling*/
  width: 100%;
  height: auto;
  /*Sets up the positioning*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/*==========Title Box For Title===========*/

.SideBox {
  /*positioning and sizing*/
  position: fixed;
  text-align: center;
  top: 55%;
  left: 0;
  width: 0%;
  height: 18%;
  /*color of the box with opacity*/
  background-color: rgba(255, 255, 255, .8);
  box-shadow: 0 0 .25em rgba(158, 67, 7, .25);
  border-radius: .25em;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  /*The */
  animation: slideIn 3s forwards;
}

@keyframes slideIn {
  /*
  Making the box slide into the screen
  by increasing the width over 3 seconds
  */
  0% {
    width: -5%;
  }
  100% {
    width: 30%;
  }
}


/*The styling for the text within the content box*/

.SideText {
  color: #0090AD;
  font-size: 0px;
  font-family: Arial;
  text-align: left;
  animation: appearingText 2s forwards;
  animation-delay: 1s;
}

@keyframes appearingText {
  /*
  Making the box slide into the screen
  by increasing the width over 3 seconds
  */
  0% {
    font-size: 0px;
  }
  100% {
    font-size: 125px;
  }
}


/*=============Navigation bar============*/

ul {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: right;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 28px 32px;
}

li a:hover {
  text-decoration: none;
  font-weight: bold;
}

li a:hover:not(.active) {
  color: black;
}

li a.active {
  color: white;
  background-color: #0090AD;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="Librain">

<head>
  <!--Sourcing jquery, css, and necessary pages-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

  <link rel="stylesheet" href="homePageStyles.scss">
  <script src="homePage.js"></script>

  <title>Librain</title>
</head>

<body>
  <div class="SideBox">
    <div class=SideText>Librain</div>
  </div>
  <ul>
    <li><a class="active" href="#!">Home</a></li>
    <li><a href="#!members">Members</a></li>
  </ul>
  <ng-view></ng-view>
</body>

</html>

＆＃13;

感谢您帮助我，我是新手，从未尝试过应用程序。我很感激能得到的所有帮助。

是否可以使用框本身缩放边框内的文本？当我使窗户变小时，它变得不合适并且对于盒子来说太大了。

角度路由无法正常运行

0 个答案: