AngularJS маршрутизация без веб-сервера

Я хочу разработать 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>

Мой 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. Итак, мои вопросы: возможно ли заставить его работать без нашего веб-сервера? А во-вторых, чего мне не хватает, чтобы это сделать?

Источник

5 ответов

Решение

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

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

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

Источник

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

<script type="text/ng-template" id="home.html">
  This is the content of the template
</script>
Источник

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

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

Источник

Вот некоторый код с http://docs.angularjs.org/api/ng. $ Route

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

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

Источник

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

Источник
Другие вопросы по тегам