javascript 模块“ui.bootstrap”不可用 - Angularjs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24365970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Module 'ui.bootstrap' is not available - Angularjs
提问by Anshu Dutta
I am facing a strange problem with my angularjs project.
我的 angularjs 项目面临一个奇怪的问题。
I have a website like - www.server.com/pwm (home page). In the page there is an anchor tag with takes me to another page - www.server.com/publishers. When I load the home page and navigate to the publishers page by clicking the anchor tag, everything works fine. But when I directly type the url in the browser I get the below exceptions (eg. If I load the home page www.server.com/pwm and then type "/publishers" at the end of the url)
我有一个像 - www.server.com/pwm（主页）这样的网站。在页面中有一个锚标记，带我到另一个页面 - www.server.com/publishers。当我加载主页并通过单击锚标记导航到发布者页面时，一切正常。但是当我直接在浏览器中输入 url 时，我得到以下异常（例如，如果我加载主页 www.server.com/pwm 然后在 url 的末尾输入“/publishers”）
[$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap"
[$injector:nomod] 模块 'ui.bootstrap' 不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。 http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap”
The confusing part is that I have included the necessary libraries and it works fine when I navigate through the webpage. The problem occurs when I try to directly navigate to a child page. I am making use to ngRoute and templates to load the page
令人困惑的部分是我已经包含了必要的库，当我浏览网页时它工作正常。当我尝试直接导航到子页面时会出现问题。我正在使用 ngRoute 和模板来加载页面
var pubsApp = angular.module('pubsApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])
and my script files
和我的脚本文件
<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>
采纳答案by Reeling
All of your script tags are using absolute paths (they start with a /) except for the angular-bootstrap tags; they use relative paths. That means they are relative to wherever you are in the browser.
除了 angular-bootstrap 标签外，所有脚本标签都使用绝对路径（它们以 / 开头）；他们使用相对路径。这意味着它们与您在浏览器中的任何位置有关。
Your javascript files are all located at www.website.com/Scripts/... because all of your script tags except those two use absolute paths, they will alwayslook for the script in the same place. However, the two angulcar-bootstrap paths will look in different place depending on where you are in the browser.
您的 javascript 文件都位于 www.website.com/Scripts/... 因为除了这两个之外的所有脚本标记都使用绝对路径，它们将始终在同一位置查找脚本。但是，根据您在浏览器中的位置，这两个 angulcar-bootstrap 路径将位于不同的位置。
The reason it works unless you go directlyto the child page is because angular only loads javascript files on the initial page load and not on navigation.
除非您直接转到子页面，否则它起作用的原因是因为 angular 仅在初始页面加载时加载 javascript 文件，而不是在导航时加载。
So simply change your angular-bootstrap script tags to use absolute paths like the rest of your script tags.
因此，只需将您的 angular-bootstrap 脚本标签更改为使用绝对路径，就像您的脚本标签的其余部分一样。
回答by keiwt
I also had same problem and I resolved it. Detail is below.
我也有同样的问题，我解决了。详情如下。
Check your {{project_root}}/test/karma.conf.js
检查您的 {{project_root}}/test/karma.conf.js
And be sure to bower_components/angular-bootstrap/ui-bootstrap-tpls.js in it. In your case, you should put Scripts/angular-ui/ui-bootstrap-tpls.min.js in it.
并确保将 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'
],
回答by micronyks
I guess, it has nothing do with ui-bootstrap. This issue is related to angular routing. Please try this server.com/#/publishers (When writing location at address-bar manually).
我想，它与 ui-bootstrap 无关。此问题与角度路由有关。请试试这个 server.com/#/publishers （在地址栏手动写入位置时）。
