12

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

4

5 回答 5

5

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

<script type="text/ng-template" id="home.html">
  This is the content of the template
</script>
于 2014-12-02T05:35:12.807 回答
4

过了一会儿，我让它工作了。

起初，我把这块移到单独的文件中

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

于 2013-03-28T09:48:07.603 回答
2

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

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

于 2013-03-28T09:52:29.793 回答
1

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

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

我认为这同样适用于你。

于 2013-03-28T09:39:14.447 回答
1

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

于 2014-09-26T06:39:49.830 回答