twitter-bootstrap 为什么模块“ui.bootstrap”不可用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38261080/
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
Why module 'ui.bootstrap' is not available?
提问by Vikas Prasad
I am trying this simple tutorial to try UI Bootstrap:
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
But I am running into two problems.
我正在尝试这个简单的教程来尝试 UI Bootstrap：https:
//scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
但我遇到了两个问题。
SyntaxError: expected expression, got '<' at ui-bootstrap-1.3.3.js:5:0
语法错误：预期的表达式，在 ui-bootstrap-1.3.3.js:5:0 处得到“<”
This is the first problem. I have not edited anything in the file, yet it says unexpected token for the very first line <!DOCTYPE html>
这是第一个问题。我没有编辑文件中的任何内容，但它说第一行的意外标记<!DOCTYPE html>
And the other one is as below:
另一种如下：
Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$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.
错误：[$injector:modulerr] 无法实例化模块应用程序，原因是：[$injector:modulerr] 无法实例化模块 ui.bootstrap 由于：[$injector:nomod] 模块 'ui.bootstrap' 不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
I saw answers to all the related questions, some of them suggesting to include the other dependencies while other suggesting to make sure of the order of the dependencies. Tried everything but no joy.
我看到了所有相关问题的答案，其中一些建议包含其他依赖项，而另一些则建议确保依赖项的顺序。尝试了一切，但没有快乐。
Below is my html and js code. Please have a look
HTML
下面是我的 html 和 js 代码。请看一下
HTML
<html>
<head>
<style type="text/css">
@import "css/bootstrap.css";
@import "css/style.css";
</style>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-touch.js"></script>
<script src="js/ui-bootstrap-1.3.3.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="mainController">
<div class="text-center">
<p>Example of Angular and the normal Bootstrap JavaScript components</p>
<p class="text-success">This will work</p>
</div>
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
Breakfast
</label>
<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
Lunch
</label>
<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
Dinner
</label>
</div>
<pre><code>{{ bigData | json }}</code></pre>
<h2>Collapse</h2>
<a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
Toggle Panel
</a>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div collapse="isCollapsed">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<pre><code>{{ isCollapsed }}</code></pre>
</div>
</body>
</html>
JS
JS
angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// define some random object
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});
Not sure what's going wrong.
不知道出了什么问题。
EditVersion details area as follows
Bootstrap v3.3.6
编辑版本详情区如下
Bootstrap v3.3.6
angular
angular-animate
angular-touch
all are having version AngularJS v1.5.3
angular
angular-animate
angular-touch 都有 AngularJS v1.5.3 版本
采纳答案by Varit J Patel
Make sure ui-bootstrap-1.3.3is loaded correctly in your app.
确保ui-bootstrap-1.3.3在您的应用中正确加载。
Please find working plunker below:
请在下面找到工作plunker：
回答by Durgpal Singh
you are missing ui-bootstrap-tpls.jsfile.
你缺少ui-bootstrap-tpls.js文件。
add this file in your page.
将此文件添加到您的页面中。
see example working plunkr
参见示例工作 plunkr
回答by Ondra ?i?ka
In my case, in a legacy application (AngularJS 1.3), it was because I put angular-ui-bootstrapto bower.jsrather than package.js.
就我而言，在传统的应用程序（AngularJS 1.3），那是因为我把angular-ui-bootstrap来bower.js，而不是package.js。
After I put it to package.js, ran npm install, copied to some source directory, and added to imports, it worked.
在我把它放到package.js、运行npm install、复制到某个源目录并添加到导入后，它工作了。
import '../js/dependencies/ui-bootstrap-tpls-0.14.3.min'
It is probably not the right way to do it, though.
I think it should be imported from bower_modules.
不过，这可能不是正确的方法。
我认为它应该从bower_modules.
import '../bower_components/angular-ui-bootstrap/???';
But, the Bower hosting does not work anymore and an attempt to install through bower installfails with HTTP 502.
但是，Bower 托管不再工作，并且尝试通过bower installHTTP 502进行安装失败。
Also, what's weird, it worked unlessI registered a provider:
另外，奇怪的是，除非我注册了一个提供者，否则它会起作用：
.config(['$tooltipProvider', function ($tooltipProvider) { ...
This way, Angular started complaining that '$tooltipProvider'is not known.
这样，Angular 开始抱怨'$tooltipProvider'不知道。
Hope this helps, although I do not know much about the old AngularJS, so take it as potentially mediocre solution.
希望这会有所帮助，尽管我对旧的 AngularJS 知之甚少，因此将其视为潜在的平庸解决方案。
