Почему AngularJS ng-view не работает локально?

Я работаю в течение нескольких часов, когда мои ссылки переходят к другим представлениям с помощью моего приложения AngularJS.

Однако, я могу только представить, что функция работает в Интернете на Plunker.

Я пытаюсь проверить функциональность кликов на моей машине локально, и ng-view не загружается. Когда я загружаю свой код Plunker, который, как я знаю, прав, потому что он работает над Plunker, ng-view, похоже, прекращает работу после локального размещения.

У меня также были аналогичные проблемы с ng-include и директивами, которые я определил как их собственные теги HTML.

Есть ли причина, по которой они не работают локально на моем компьютере? (И способ, которым я могу исправить это для целей тестирования?)

Вы можете просмотреть некоторые из кода, о котором я говорю в Plunker здесь, если хотите.

Ответы

Ответ 1

Оба ng-view и ng-include используют AJAX для загрузки шаблонов. Проблема в том, что браузер по умолчанию не разрешает AJAX-запросы к файлам, расположенным в вашей локальной файловой системе (по соображениям безопасности). Поэтому у вас есть два варианта:

  • Запустите локальный веб-сервер, который будет обслуживать ваши файлы.
  • Сообщите вашему браузеру разрешить доступ к локальным файлам.

Если вы находитесь на Mac, опция кулака довольно проста, так как у вас есть несколько встроенных веб-серверов (Apache httpd и модуль Python под названием SimpleHTTPServer). Чтобы запустить модуль Python SimpleHTTPServer, просто откройте консоль в папке, где находятся ваши файлы и запустите

python -m SimpleHTTPServer 3000

затем откройте свой браузер и введите http://localhost:3000. Что это.

Если вы находитесь в Windows, это также возможно. Вы можете установить, например, Wamp и обслуживать файлы из него.

Второй вариант возможен с Chrome, просто запустите его с помощью параметра --allow-file-access-from-files из командной строки или добавьте этот флаг в ярлык после пути к исполняемому файлу Chrome.

Этот ресурс также может быть полезен для понимания того, как локально работать в разных браузерах и использовать разные веб-серверы.

Ответ 2

ng-view и ng-include make ajax-запросы для обслуживания файла шаблона. Поскольку вы используете его локально, он не может выполнить этот запрос. Легко исправить это, чтобы использовать http-server для обслуживания вашего содержимого на локальном сервере.

Ответ 3

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

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