当前位置: 首页 > 面试题库 >

没有Web服务器的AngularJS路由

司徒耀
2023-03-14
问题内容

我想为瘦客户端开发html5 SPA应用程序。无法在其上启动任何Web服务器。如果没有Web服务器,我将无法使路由工作。

我的index.html

<!doctype html>
   <html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="app.js"></script>
    <title></title>
</head>
<body style="background-color: white;">
    <h1>Index</h1>
    <a id="link" href="/login">Go to login</a>
    <div ng-controller="HomeCtrl">
        <ul ng-repeat="number in numbers" >
            <li>{{number}}</li>
        </ul>
    </div>
</body>
</html>

我的app.js

angular.module('app', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
      when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
      otherwise({redirectTo:'/'});
  });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}

我正在Chrome的计算机上本地测试此代码。数据绑定的工作原理很吸引人,但无法链接到登录页面。它通向{X}:\
login。所以我的问题是:是否可以使其与Web服务器一起使用?其次,我想完成它所缺少的是什么?


问题答案:

一段时间后,我使它起作用。

首先,我将这部分移到了单独的文件中

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

其次,index.html我添加了这个div

<div ng-view></div>

它用作视图占位符。

index.html如果您熟悉asp.net,则现在用作“母版页”或“布局”。当您单击链接时,templateUrl文件的内容将插入到占位符div中。

这样做的缺点是url应该看起来像这样 <a href="#/login"></a>



 类似资料:
  • 我有一个简单的spring boot应用程序,它从JMS队列中获取消息,并将一些数据保存到日志文件中,但不需要web服务器。有没有办法在没有web服务器的情况下启动spring boot?

  • 问题内容: 我正在尝试编写AngularJS客户端专用应用程序。 我以为我也许可以通过在地址栏中输入以下内容从chrome加载它:file:/// C:/path/to/project//index.html我也尝试过用 –allow-file标志调用chrome从文件访问 不幸的是,什么都没有发生-只是选项卡名称上的繁忙标志正在起作用。 为什么不加载我的应用程序? 我正在使用以下代码: inde

  • 问题内容: 我正在学习AngularJS,有一件事让我很烦。 我用来为我的应用程序声明路由规则: 但是当我在浏览器中导航到我的应用程序时,我看到的不是。 所以我的问题是为什么AngularJS将此hash添加到url中?有可能避免它吗? 问题答案: 实际上,对于非HTML5浏览器,您需要#(#标签)。 否则,他们将只通过提到的href对服务器进行HTTP调用。#是一个旧的浏览器短路问题,它不会触发

  • 问题内容: 我正在学习AngularJS,有一件事让我很烦。 我用来为我的应用程序声明路由规则: 但是当我在浏览器中导航到我的应用程序时,我看到的不是。 所以我的问题是为什么AngularJS将此哈希添加到url中?有可能避免它吗? 问题答案: 实际上,对于非HTML5浏览器,您需要#(#标签)。 否则,他们将只通过提到的href对服务器进行HTTP调用。#是一个旧的浏览器短路问题,它不会触发请求

  • 这是我的角js代码,我想在其中以Json格式将数据发送到我用java编写的restful Web服务。它调用了webservice,但我没有得到任何数据。 这是我需要数据的restful Web服务。 返回响应;}

  • Swoole框架提供的WebServer有3种使用方法 一、直接使用HttpServer HttpServer支持静态文件和include file。业务代码不需要写任何Server的代码,只需要设置document_root,并编写对应php文件。这种使用方法与Apache/Nginx+FPM类似。 server.php $AppSvr = new Swoole\Network\Protocol