Модуль 'ui.bootstrap' недоступен - Angularjs

ProgramBox

Модуль ‘ui.bootstrap’ недоступен — Angularjs

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#javascript #angularjs #angular-ui #angular-routing

#javascript #angularjs #angular-пользовательский интерфейс #угловая маршрутизация

Вопрос:

Я столкнулся со странной проблемой с моим проектом angularjs.

У меня есть веб-сайт, подобный — www.server.com/pwm (домашняя страница). На странице есть тег привязки, который переводит меня на другую страницу — www.server.com/publishers . Когда я загружаю домашнюю страницу и перехожу на страницу издателей, щелкнув тег привязки, все работает нормально. Но когда я напрямую ввожу URL-адрес в браузере, я получаю следующие исключения (например. Если я загружу домашнюю страницу www.server.com/pwm а затем введите «/ publishers» в конце URL-адреса)

[$injector:nomod] Модуль ‘ui.bootstrap’ недоступен! Вы либо неправильно написали имя модуля, либо забыли его загрузить. При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента. http://errors.angularjs.org/1.2.18 /$инжектор/nomod?p0=ui.bootstrap»

Запутанная часть заключается в том, что я включил необходимые библиотеки, и они отлично работают при навигации по веб-странице. Проблема возникает, когда я пытаюсь напрямую перейти на дочернюю страницу. Я использую ngRoute и шаблоны для загрузки страницы

 var pubsApp = angular.module('pubsApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])

и мои файлы скриптов

 <script src="/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/Scripts/angular.js" type="text/javascript"></script>
<script src="/Scripts/angular-route.js" type="text/javascript"></script>
<script src="/Scripts/angular-sanitize.js" type="text/javascript"></script>
<script src="/Scripts/angular-resource.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="/js/app.js" type="text/javascript"></script>

1. Это одностраничное приложение? Если да, то как выглядит ваша таблица маршрутизации?

2. я не знаком с angular для начальной загрузки, но разве вы не включаете оба, angular и jquery, а также оба их соответствующих bootstrap.js файлы? Я полагаю, что, по крайней мере, оставить /Scripts/bootstrap.js …

3. Файлы src js для ui-bootstrap являются относительными, поэтому неудивительно, почему это не работает. Сделать их абсолютными, как остальные?

4. вам не нужно ui-bootstrap.min.js и ui-bootstrap-tpls.min.js . ui-bootstrap-tpls.min.js содержит весь код и шаблоны.

Ответ №1:

Все теги вашего скрипта используют абсолютные пути (они начинаются с / ), за исключением тегов angular-bootstrap; они используют относительные пути. Это означает, что они относятся к тому, где вы находитесь в браузере.

Все ваши файлы javascript расположены по адресу www.website.com/Scripts /… поскольку все ваши теги скрипта, кроме этих двух, используют абсолютные пути, они всегда будут искать скрипт в одном и том же месте. Однако два пути angulcar-bootstrap будут выглядеть в разных местах в зависимости от того, где вы находитесь в браузере.

Причина, по которой он работает, если вы не перейдете непосредственно на дочернюю страницу, заключается в том, что angular загружает файлы javascript только при начальной загрузке страницы, а не при навигации.

Поэтому просто измените теги скрипта angular-bootstrap, чтобы использовать абсолютные пути, как и остальные теги вашего скрипта.

Ответ №2:

У меня тоже была такая же проблема, и я ее решил. Подробности ниже.

Проверьте свой {{project_root}}/test/karma.conf.js

И обязательно bower_components/angular-bootstrap/ui-bootstrap-tpls.js в нем. В вашем случае вы должны поместить Scripts/angular-ui/ui-bootstrap-tpls.min.js в нем.

 files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-route/angular-route.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-touch/angular-touch.js',
  'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

Ответ №3:

Я думаю, это не имеет ничего общего с ui-bootstrap. Эта проблема связана с угловой маршрутизацией. Пожалуйста, попробуйте это server.com/#/publishers (При вводе местоположения в адресной строке вручную).