AngularJS UI маршрутизатор показывает пустую страницу с templateUrl

Я пытаюсь разделить свое приложение на представления и начать с углового маршрутизатора пользовательского интерфейса. Я создаю несколько представлений, и если я использую ‘template’, он печатает нормально, но когда я использую templateUrl с внешним .html-файл, я получаю только пустую страницу.

HTML:

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>

<script src="searchApp.js"></script>

</head>

<body ng-app="searchApp">
<div ui-view>
</div>
</body>
</html>

searchApp.js:

var searchApp = angular.module('searchApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('index', {
    url: "/",
    views: {
      '': {
        templateUrl: 'testView.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/');
}])

testView.формат html

This is a test.

Вот Планкр: https://plnkr.co/edit/4xQaHbx71mUNYRbTQntz

Редактировать:
Это, кажется, работает в Plunker, но не работает локально на моем компьютере. Пробовал и на mac, и на win.

EDIT 2:
Все, что я могу сделать, это то, что параметр ui Router templateUrl не работает при запуске прямо из файловой системы, но, возможно, нужен сервер, чтобы иметь возможность открывать файлы? Это так? Как это обойти?

EDIT 3:
Решение: кажется, что страница должна быть запущена через сервер, а не прямо из файловой системы при использовании templateUrl (или включая любые файлы в целом), так как они извлекаются через Ajax. So-чтобы использовать templateUrl, необходимо установить сервер на локальном компьютере или продолжить кодирование на сервере.

1 ответ

  1. Это не имело ничего общего с UI-router, так как была выдана ошибка, которую angularне удалось найти. Вы использовали неверный URL для загрузки Angular. Изменение

    "http://ajax.googleapis.com/ajax/libs/angularjs/...

    к

    https://ajax.googleapis.com/ajax/libs/angularjs/...

    все получилось.

    https://plnkr.co/edit/rSbD4FBIFsnamiaMQLve?p=preview