关键词：
【中文标题】结合 AngularJS 和 Twitter Bootstrap 的最佳方式【英文标题】：Best way to combine AngularJS and Twitter Bootstrap 【发布时间】：2014-04-20 17:31:54 【问题描述】：我想将 AngularJS 和 Twitter Bootstrap 组合成一个全新的网络应用程序。好像是AngularJS directives have been written for Bootstrap。
但是，仔细观察，这些指令似乎并没有涵盖所有的 Bootstrap。我可以将 AngularUI Bootstrap 代码与原始 Bootstrap 代码结合起来以获得完整性吗？一开始就可以做到吗？
我偶然发现了另一个名为 AngularStrap 的 Angular 项目。我可以将这三个结合起来吗？
结合 AngularJS 和 Twitter Bootstrap 以获得完整性的最佳方式是什么？
【问题讨论】：
【参考方案1】：通常，Bootstrap 的 CSS 部分在 AngularJS 中的工作方式与在 Bootstrap JavaScript 中的工作方式完全相同。所以只要你只想用Bootstrap CSS，就不用考虑了。
对于几乎所有的 Bootstrap JavaScript 功能，AngularUI 提供了一种替代方法。例如。导航栏通常仅适用于 CSS，因此只需查看 Bootstrap 文档并实现它。如果您需要导航栏的一些响应式功能，您将需要collapse 指令；示例请参见此处：angular-ui navbar
所以，如果您认为 AngularUI 中缺少任何内容，您能否更具体地说明“还不够完整，无法涵盖整个 Twitter Bootstrap”？我不认为存在普遍的差距。
此外，http://angular-ui.github.io/bootstrap/ 是该任务最成熟的库。因此，如果您认为缺少某些功能，我强烈建议您对其进行修补并提出拉取请求。
【讨论】：
我不支持导航栏。但我猜这个库应该是最成熟的，因为大多数人都用过。 我非常不同意你关于 ui-bootstrap 是最成熟的项目的说法。你的项目充其量是混乱的。您的 API 非常糟糕，总的来说，我发现您的项目使用起来不愉快。你们很受欢迎，因为你们是第一个出现在现场并支持使用 angularJS 的引导程序。 Angular Strap 拥有更令人愉悦的 API，并且总体上提供了更愉悦的编程体验。【参考方案2】：可以通过编写您自己的 Angular 指令来组合代码，这些指令生成具有 Bootstrap 类的 HTML。我正在开发一个将 Bootstrap 与 Angular 相结合的类似 Web 应用程序。我在那里所做的事情是这样的：
app.directive('trackerMenu', function()
return
restrict: 'E',
templateUrl: "partials/menu.html"
;
);
而menu.html的内容是：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<li class='toggleable'>
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
并且指令是这样使用的：
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
基本上，我的指令所做的是将 Bootstrap navbar 注入页面。
【讨论】：
【参考方案3】：Angular Strap 支持导航栏，根据经验，您可以逐个模块地将 ui boostrap 与 angular strap 混合使用。这两个项目都允许您为自定义构建注入它们的组件，如下所示：
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
但是，它们可以并且将会相互冲突。即你不能在同一个项目中拥有 ui-bootstrap 模态和 angular strap 模态。此外，两个项目中的一些指令依赖于其他模块，例如，Angular Strap 日期选择器依赖于工具提示指令。
【讨论】：
href 导致使用 Angularjs 和 Twitter Bootstrap 意外重新加载页面
】href导致使用Angularjs和TwitterBootstrap意外重新加载页面【英文标题】：hrefcausesunintendedpagereloadwithAngularjsandTwitterBootstrap【发布时间】：2013-06-1913:35:14【问题描述】：我正在开发一个使用Angularjs和TwitterBootstrap的项目。Bootstrap使用#来... 查看详情
结合 AngularJS 和 Laravel 路由
】结合AngularJS和Laravel路由【英文标题】：CombineAngularJSandLaravelRouting【发布时间】：2015-07-0812:44:29【问题描述】：我在我的网络应用项目中使用AngularJS和Laravel。我的路由如下所示：AngularJS：angular.config([\'$stateProvider\',\'$urlRouterProvi... 查看详情
结合 Angularjs 和 CodeIgniter
】结合Angularjs和CodeIgniter【英文标题】：CombiningAngularjsandCodeIgniter【发布时间】：2013-01-1822:07:21【问题描述】：我正在开发一个用CodeIgniter编写的现有网站，我们正在考虑将AngularJS用于一些需要大量前端功能但我们不想替换所有Cod... 查看详情
如何结合 AngularJS 和 Thymeleaf 模板
】如何结合AngularJS和Thymeleaf模板【英文标题】：HowtocombineAngularJSandThymeleaftemplates【发布时间】：2017-03-2820:57:54【问题描述】：我正在将当前使用Thymeleaf的网页转换为使用AngularJS。我想转换包含Thymeleaf的后续块<formth:action="@?delete... 查看详情
玩转springboot——结合angularjs和jdbc
参考官方例子：http://spring.io/guides/gs/relational-data-access/ 一、项目准备在建立mysql数据库后新建表“t_order”SETFOREIGN_KEY_CHECKS=0;--------------------------------Tablestructurefor`t_order`------- 查看详情
使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用
】使用AngularJS的TwitterBootstrap导航栏-折叠不起作用【英文标题】：TwitterBootstrapNavbarwithAngularJS-CollapseNotFunctioning【发布时间】：2013-01-2209:55:47【问题描述】：我正在使用Angular和TwitterBootstrap导航栏并试图让折叠功能发挥作用。部分... 查看详情
结合 AngularJS、HTML5 位置和超静态
】结合AngularJS、HTML5位置和超静态【英文标题】：CombiningAngularJS,HTML5locationsandsuperstatic【发布时间】：2015-04-1421:29:47【问题描述】：我一直在使用nodejshttp-server来提供我的Angular应用程序，但它不适用于HTML5位置，因为使用它们需要... 查看详情
angularjs表单验证ngmessages和创建自定义指令结合
index.html1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5</head>6<style>7/*input.ng-invalid{8border:1pxsolidred;9}10input.ng-valid{11border:1pxsolidgreen;12}*/ 查看详情
jQueryUI 可排序开始位置/结束位置与 AngularJS 结合？
】jQueryUI可排序开始位置/结束位置与AngularJS结合？【英文标题】：jQueryUISortablestartposition/endpositionincombinationwithAngularJS?【发布时间】：2014-12-2003:58:21【问题描述】：根据这个问题（和答案），我应该可以通过几种方式获得原始的... 查看详情
AngularJS - 将拖放与流程图相结合
】AngularJS-将拖放与流程图相结合【英文标题】：AngularJS-Combiningdragdropwithflowchart【发布时间】：2015-11-1012:37:40【问题描述】：我正在尝试创建一个具有拖放功能的流程图，例如组件列表是动态的，每个组件最多可以出现一次，第... 查看详情
Laravel 4 和 Angular JS 和 Twitter Bootstrap 3 分页
】Laravel4和AngularJS和TwitterBootstrap3分页【英文标题】：Laravel4andAngularJSandTwitterBootstrap3Pagination【发布时间】：2013-11-1800:17:42【问题描述】：编辑：我需要在我的Laravel4-AngularJS应用程序中进行分页，该应用程序使用twitterbootstrap3构建... 查看详情
使用 Angularjs 和 Mongoose (meanjs) 创建子文档并保存值
】使用Angularjs和Mongoose(meanjs)创建子文档并保存值【英文标题】：CreatesubdocumentandsavevaluewithAngularjsandMongoose(meanjs)【发布时间】：2014-11-0810:24:27【问题描述】：我正在尝试向\'twitter\'键添加一个值，该键是一个子文档\'social\'，在控... 查看详情
在 AngularJS 中结合 CREATE 和 EDIT 控制器是一种好习惯吗？
】在AngularJS中结合CREATE和EDIT控制器是一种好习惯吗？【英文标题】：IsitgoodpracticetocombineCREATEandEDITcontrollersinAngularJS?【发布时间】：2014-09-2215:33:02【问题描述】：CREATE和EDIT控制器之间有很多重复的代码。这些控制器可以合二为一... 查看详情
使用 Twitter Bootstrap 添加垂直空格？
】使用TwitterBootstrap添加垂直空格？【英文标题】：AddverticalwhitespaceusingTwitterBootstrap?【发布时间】：2012-08-2917:01:47【问题描述】：使用Twitter的Bootstrap添加垂直空白的最佳方法是什么？例如，假设我正在创建一个登录页面，并且希... 查看详情
Twitter Bootstrap 3，垂直居中内容[重复]
】TwitterBootstrap3，垂直居中内容[重复]【英文标题】：TwitterBootstrap3,verticallycentercontent[duplicate]【发布时间】：2013-11-2902:15:26【问题描述】：我知道这已经被问了一千次了，但我找不到让文本和图像垂直居中的方法。我正在使用带... 查看详情
如何使 Twitter Bootstrap 按钮组与 AngularJS 一起工作？
】如何使TwitterBootstrap按钮组与AngularJS一起工作？【英文标题】：HowtomakeTwitterBootstrapbuttongroupsworkwithAngularJS?【发布时间】：2013-10-0115:26:33【问题描述】：我正在尝试创建一个简单的twitterbootstrapbuttongroup，它允许用户选择多个选项... 查看详情
从 Grails Twitter-Bootstrap 插件覆盖 CSS
】从GrailsTwitter-Bootstrap插件覆盖CSS【英文标题】：OverridingCSSfromGrailsTwitter-BootstrapPlugin【发布时间】：2013-03-2011:23:04【问题描述】：我有一个使用Twitter-Bootstrap插件的Grails2.2.1应用程序，该插件为Grails应用程序提供Bootstrap的基本CSS... 查看详情
如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表
】如何在TwitterBootstrapAngularJS模态窗口中以100%宽度显示Flot图表【英文标题】：HowtoshowFlotchartin100%widthinTwitterBootstrapAngularJSmodalwindow【发布时间】：2012-10-0314:41:41【问题描述】：我正在使用TwitterBootstrapAngularJS构建一个网络应用程序... 查看详情