没有 Web 服务器的 AngularJS 路由答案

【问题标题】：AngularJS routing without a web server没有 Web 服务器的 AngularJS 路由
【发布时间】：2013-03-18 15:46:46
【问题描述】：

我想为瘦客户端开发 html5 SPA 应用程序。无法在其上启动任何 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。所以我的问题是：有没有可能让它在没有网络服务器的情况下工作？其次，我缺少什么来完成它？

【问题讨论】：

标签： routing angularjs single-page-application

【解决方案1】：

您需要使用脚本标签将模板放入 index.html 本身，这样 Angular 就不再需要发出 AJAX 请求来获取它们。

<script type="text/ng-template" id="home.html">
  This is the content of the template
</script>

【讨论】：

【解决方案2】：

这个问题的解决方案 [Cross origin requests are only supported for HTTP] 对我有用。
但我真的不明白，如果没有 Web 服务器，如何使用 ngView 和 ngRoute 让它工作？
您将 ngRoute 配置为在 index.html 之外获取 login.html，这意味着您正在使用 AJAX 服务来加载文件，但是如果没有 Web 服务器，AJAX 服务将无法工作。这就是我遇到问题的原因。

【讨论】：

您可以使用 -disable-web-security 标志运行 chrome 以使其忽略 CORS 和同源策略，但请小心操作。当我问这个问题时，我正在开发用于在没有桌面/移动浏览器那样严格的安全限制的设备上嵌入浏览器的应用程序，所以这对我来说不是问题。
谢谢你，丹提克斯。 IE呢？
同理IE，你可以禁用网络安全

【解决方案3】：

Angular 是一个客户端 JS 框架，因此它不需要网络服务器。除了添加 ng-view（正如您已经知道的那样）之外，您的链接需要在前面有一个 hashbang (#/login)，除非您使用的是 html5mode。

因此，在 URL 中添加 hashbang 并不是一个缺点，而是一种选择。

【讨论】：

非常有帮助，但是不同的客户端如何访问应用程序......我们应该将应用程序客户端代码像胖客户端一样发送给每个客户端吗？

【解决方案4】：

过了一会儿，我成功了。

一开始，我把这块放到单独的文件中

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

其次，在index.html我已经添加了这个div

<div ng-view></div>

它被用作视图占位符。

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

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

【讨论】：

这是标准的角度方法。浏览文档网站上的教程
这不适合我。在您在回答中提到的上述修改中，是什么阻止了对服务器的请求？对我来说，如果没有 Web 服务器，该应用程序将无法运行。
@NidhinDavid 您是说 CORS 错误吗？不，我没有。

【解决方案5】：

这里有一些来自http://docs.angularjs.org/api/ng.$route 的代码

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

我认为这同样适用于你。

【讨论】：

不，我试过了。我已经让它实际工作了。我会在几分钟内发布答案。