模块'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 脚本标签以使用绝对路径，就像其他脚本标签一样。