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

Question

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

我有一个网站，例如 - www.server.com/pwm（主页）。在页面中，有一个锚标记将我带到另一个页面 - www.server.com/publishers。当我加载主页并通过单击锚标记导航到发布者页面时，一切正常。但是当我直接在浏览器中输入 url 时，会出现以下异常（例如，如果我加载主页 www.server.com/pwm 然后在 url 末尾输入“/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（手动在地址栏写入位置时）。