结合AngularJS和Twitter Bootstrap的最佳方式
Best way to combine AngularJS and Twitter Bootstrap
我想把AngularJS和Twitter Bootstrap结合成一个新的web应用程序。看起来AngularJS的指令是为Bootstrap编写的。
然而,仔细看一下,这些指令似乎并没有涵盖所有的Bootstrap。我可以将AngularUI引导代码与原始引导代码结合起来以获得完整性吗?这首先能做到吗?
我偶然发现了另一个叫做AngularStrap的Angular项目。我能把这三个结合起来吗?
结合AngularJS和Twitter Bootstrap来获得完整性的最好方法是什么?
一般来说,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/是该任务最成熟的库。因此,如果您认为有功能缺失,我强烈建议修补它并进行拉取请求。
这些代码可以通过编写你自己的Angular指令来组合,这些指令会生成带有Bootstrap类的HTML。我正在开发一个类似的web应用程序,它结合了Bootstrap和Angular。我在这里所做的是这样的:
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 导航条到页面。
Angular Strap支持导航条,而且从经验来看,你可以在一个模块一个模块的基础上混合ui引导和Angular Strap。这两个项目都允许您为自定义构建注入它们的组件,如下所示:
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
然而,它们可以并且将会相互冲突。也就是说,你不能在同一个项目中使用ui-bootstrap模态和angular strap模态。此外,这两个项目中的一些指令都依赖于其他模块,比如,Angular Strap的日期选择器就依赖于工具提示指令。
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 为react组件传递道具的最佳方式
- 让Webpack管理Quirky AMD定义的最佳方式
- 在承诺链中处理早期回报的最佳方式
- 在ng重复循环中显示条件内容的最佳方式是什么
- 在phonegap中为android调用onload函数的最佳方式
- 链接两个网页或网络应用程序的最佳方式
- 什么's是连接供应商js文件的最佳方式
- 什么's是在javascript中迭代项的最佳方式
- 在node.js中编写单元测试的最佳方式是什么
- 在页面上记录数据并实现pushstate()的最佳方式
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- 什么'这是加载jQuery的最佳方式
- 将大数组(字符串和类型数组的混合物)存储到blob或文件中/从blob或文件检索大数组的最佳方式
- 在网站上显示.mov作为加载屏幕的最佳方式
- 使用Angular存储用户以前是否选中过复选框,然后再调用它的最佳方式是什么
- 以角度渲染表中数据的最佳方式
- 删除集合中旧邮件/帖子的最佳方式
- 显示全屏Ajax加载程序的最佳方式
- PHP和JS中表单验证的最佳方式