结合AngularJS和Twitter Bootstrap的最佳方式
我想结合AngularJS和Twitter Bootstrap到一个新鲜的networking应用程序。 看起来好像AngularJS指令是为Bootstrap编写的 。
但仔细一看，这些指令似乎并没有涵盖所有Bootstrap。 我可以将AngularUI Bootstrap代码和原始Bootstrap结合起来以获得完整性吗？ 首先能做到吗？
我偶然发现了另一个名为AngularStrap的 Angular项目。 我可以结合所有三个？
结合AngularJS和Twitter Bootstrap获得完整性的最佳方式是什么？
通常，Bootstrap的CSS部分与使用Bootstrap JavaScript的AngularJS完全相同。 所以只要你只想使用Bootstrap CSS，你就不必考虑它。
对于几乎所有的Bootstrap JavaScriptfunction，AngularUI都提供了一种替代方法。 例如，导航栏一般只用于CSS，所以只要看Bootstrap文档并实现它。 如果您需要导航栏的一些响应function，则需要使用collapse指令; 举个例子，请看这里： angular-ui navbar
所以，如果你认为AngularUI中缺less任何东西，你能否更具体地说“不够完整，无法覆盖整个Twitter Bootstrap”？ 我不觉得有一个普遍的差距。
而且， http://angular-ui.github.io/bootstrap/是这个任务最成熟的库。; 所以如果你觉得缺lessfunction，我会强烈build议修补它，并提出一个拉请求。
可以通过编写自己的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 导航栏到页面中。
Angular Strap支持导航栏，也就是说，您可以通过模块将ui boostrap与模块上的angular度带混合使用。 这两个项目都允许您为自定义构build注入组件，如下所示：
angular.module('myApp', [ 'mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside', 'ui.bootstrap.popover' ]);
但是，他们可以并且将会相互冲突。 IE你不能在同一个项目中使用ui-bootstrap模态和angular带模式。 此外，这两个项目的一些指令都依赖于其他模块，例如，Angular Strapdateselect器对工具提示指令具有依赖性。
