Fatal编程技术网

Angularjs 带bootstrap3的Bower

angularjs twitter-bootstrap-3

Angularjs 带bootstrap3的Bower,angularjs,twitter-bootstrap-3,bower,Angularjs,Twitter Bootstrap 3,Bower,试用约曼（1.0.4）。生成了一个带有yo Angular的Angular应用程序；输入No以安装带Sass的引导程序，因为我希望引导程序v3具有更少的功能 搭建脚手架之后，为了获得引导3，我进入： bower安装引导程序 将引导安装到bower\u组件/bootstrap文件夹中。但它并没有在index.html文件中链接/包含Bootstrap的CSS或JS。为什么? index.html文件确实包含bower_components文件夹中的Angular js文件： <!--

试用约曼（1.0.4）。生成了一个带有
yo Angular
的Angular应用程序；输入
No
以安装带Sass的引导程序，因为我希望引导程序v3具有更少的功能

搭建脚手架之后，为了获得引导3，我进入：

bower安装引导程序

将引导安装到
bower\u组件/bootstrap
文件夹中。但它并没有在
index.html
文件中链接/包含Bootstrap的CSS或JS。为什么?

index.html
文件确实包含bower_components文件夹中的Angular js文件：

    <!-- build:js scripts/modules.js -->
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbuild -->
但不是引导文件。为什么？我必须手动添加/链接到它们吗？我做错了什么？为我的应用程序生成支架后，如何添加引导？

您必须编辑index.html。Yeoman生成器生成基本index.html。Bower只下载作为包的依赖项。。。但仅此而已，它对你的应用程序以及你将如何使用它下载的软件包一无所知。您必须自己添加所需的文件。

根据yeoman的：

# Install it and save it to bower.json
>bower install jquery-pjax --save

# If you're not using RequireJS...
>grunt bower-install
这是为了将依赖项注入到
index.html
文件中

注意：
在能够使用
bower install
之前，需要进行一些设置
有关更多详细信息，请参阅，。 如果index.html中有以下内容，则使用

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
然后，无论何时运行，bower install都会将供应商文件添加到html中。否则，是。

使用yeoman，您可以使用
--save
标志安装依赖项以更新bower.json文件

之后，运行
$bower update
（可选）并执行
$grunt wiredep
将依赖项注入
index.html

如果您查看Yeoman生成的
index.html
中的注释，您将看到如下内容：

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
在这些注释中，依赖项将被注入

Wiredep不依赖Grunt或任何其他构建工具：

npm安装--保存wiredep

在将注入依赖项的代码中插入占位符：

<html>
<head>
  <!-- bower:css -->
  <!-- endbower -->
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>
自Bootstrap版本3.3.5以来，Bootstrap.css文件已从Bootstrap的包管理器json中删除。因此，在运行
wiredep
之前，我必须回滚到版本
3.3.4

bower install --save bootstrap#3.3.4
安装依赖项后，您可以执行
$grunt wiredep
bower install --save bootstrap#3.3.4