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

Question

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

我有一个网站，如 - www.server.com/pwm(主页)。在页面中有一个 anchor 标记，将我带到另一个页面 - www.server.com/publishers。当我加载主页并通过单击 anchor 标记导航到发布者页面时，一切正常。但是，当我直接在浏览器中输入 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 脚本标签更改为像其他脚本标签一样使用绝对路径。