Question

我正在使用angular JS开发一个应用程序。我有一个菜单，当我点击其中一个选项时，它变为活动状态（更改颜色），并且我包含一个不同的html页面。例如：

<ul class="nav navbar-nav side-nav">

                    <li > 
                      <a href="#" ng-click="subPage.url='home.html'" ><i class="glyphicon glyphicon-folder-close"></i> Home </a>
                    </li>  
                    <li > 
                      <a href="#" ng-click="subPage.url='profil.html'" ><i class="glyphicon glyphicon-folder-open"></i> Profil</a>
                    </li>
</ul>

........

<div id="page-wrapper">
  <div class="container-fluid">  
          <!-- Page Heading -->    
        <div ng-include="subPage.url"></div>

 </div>
</div>

工作正常。但是当我刷新页面时，我总是得到一个没有包含页面的欢迎页面。我试图初始化subPage.url：

<div  ng-init="subPage.url = 'home.html'">

但这样当我刷新时我总是得到home.html。怎么做，当我刷新时，我继续包含相同的页面并刷新它？

Answer 1

刷新页面时，应用程序从头开始。您存储在内存中的所有内容（即子页面URL）都将丢失。

您应该使用路由器（ngRoute或ui-router）。除了更改视图外，单击菜单选项还应更改URL。这样，刷新页面会再次启动应用程序，但路由器仍然会看到URL是子页面之一，并会自动路由到该子页面。

Answer 2

您应该使用$ routeProvider并将默认路由（'/'）设置为home.html。点击此处了解更多信息：https://thinkster.io/egghead/routeprovider-api

包含带角度JS的html页面，并在刷新时实现它们

2 个答案: