Угловая маршрутизация без веб-сервера

Я хочу разработать приложение html5 SPA для тонкого клиента. Невозможно запустить какой-либо веб-сервер. И я не могу выполнять маршрутизацию без веб-сервера.

Мой 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>

My 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. Поэтому мои вопросы: возможно ли, чтобы он работал с веб-сервером? И во-вторых, что мне не хватает, чтобы сделать это?

Ответ 1

Через некоторое время я сделал это.

Сначала я переместил эту часть в отдельный файл

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

Ответ 2

Вам нужно разместить свои шаблоны в самом index.html с помощью тегов script, чтобы angular больше не нужно было делать запросы AJAX для их извлечения.

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

Ответ 3

Angular - это JS-инфраструктура на стороне клиента, поэтому ему не нужен веб-сервер. Помимо добавления ng-view (как вы уже выяснили), вам нужно иметь перед собой hashbang (#/login), если вы не используете html5mode.

Итак, наличие хэша в URL-адресах не является недостатком, это вариант.

Ответ 4

Вот код из http://docs.angularjs.org/api/ng. $route

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

Я думаю, что то же самое будет работать для вас.

Ответ 5

Решение этой проблемы [Запросы на кросс-начало поддерживаются только для HTTP] работает для меня.
Но я действительно не понимаю, как вы могли бы работать без веб-сервера с помощью ngView и ngRoute?
Вы конфигурируете ngRoute для получения login.html за пределами index.html, это означает, что вы используете службу AJAX для загрузки файла, но служба AJAX не может работать без веб-сервера. Вот почему я получил свою проблему.