模块'ui.bootstrap'不可用 - Angularjs

Question

我的angularjs项目遇到了一个奇怪的问题。

我有一个网站 - www.server.com/pwm（主页）。 在页面中有一个锚标记带我到另一页 - www.server.com/publishers。 当我加载主页并通过单击锚标签导航到发布者页面时，一切正常。 但是当我直接在浏览器中输入网址时，我会得到以下例外情况（例如，如果我加载主页www.server.com/pwm，然后在网址末尾输入“/ publishers”）

[$ injector：nomod]模块'ui.bootstrap'不可用！ 您要么错误拼写了模块名称，要么忘记加载它。 如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.2.18/ $ injector / 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>

Answer 1

除了angular-bootstrap标记之外，所有脚本标记都使用绝对路径（它们以/开头）; 他们使用相对路径。 这意味着它们与您在浏览器中的任何位置相关。

您的javascript文件都位于www.website.com/Scripts / ...因为除了这两个脚本标记之外的所有脚本标记都使用绝对路径，它们将始终在同一位置查找脚本。 但是，根据您在浏览器中的位置，两个angulcar-bootstrap路径将在不同的位置查看。

除非你直接进入子页面，它的工作原因是因为angular只会在初始页面加载时加载javascript文件，而不是导航。

因此，只需更改angular-bootstrap脚本标记即可使用绝对路径，例如其他脚本标记。

Answer 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'
],

Answer 3

我猜，它与ui-bootstrap没什么关系。 此问题与角度路由有关。 请尝试使用此server.com/#/publishers（手动在地址栏中写入位置时）。