结合 AngularJS 和 Twitter Bootstrap 的最佳方式
Posted
技术标签:
【中文标题】结合 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 日期选择器依赖于工具提示指令。
【讨论】:
以上是关于结合 AngularJS 和 Twitter Bootstrap 的最佳方式的主要内容,如果未能解决你的问题,请参考以下文章
使用 Cordova 和 Angularjs 登录 Twitter:401 未经授权的错误
href 导致使用 Angularjs 和 Twitter Bootstrap 意外重新加载页面
使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用
如何使 Twitter Bootstrap 按钮组与 AngularJS 一起工作?