最佳的AngularJS和Twitter Bootstrap结合方式

Question

最佳的AngularJS和Twitter Bootstrap结合方式

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-strap

70

我想将AngularJS和Twitter Bootstrap结合起来制作一个新的Web应用程序。看起来AngularJS指令已经为Bootstrap编写。

然而，经过仔细查看，这些指令似乎并没有涵盖所有Bootstrap。我可以将AngularUI Bootstrap代码与原始Bootstrap组合以获得完整性吗？首先可以做到吗？

我偶然发现了另一个名为AngularStrap的Angular项目。我可以将所有三个组合起来吗？

结合AngularJS和Twitter Bootstrap以获得完整性的最佳方法是什么？

- guagay_wk

3个回答

17

通过编写自己的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 导航栏注入到页面中。

- ABucin

4

Angular Strap支持导航栏，而且从经验来说，您可以按模块混合使用UI Boostrap和Angular Strap。这两个项目都允许您注入它们的组件以进行自定义构建，如下所示：

angular.module('myApp', [ 
    'mgcrea.ngStrap.modal',
    'mgcrea.ngStrap.aside', 
    'ui.bootstrap.popover'
   ]);

然而，它们之间可能会产生冲突。例如，在同一项目中无法同时使用ui-bootstrap模态框和angular strap模态框。此外，这两个项目的某些指令具有依赖关系，例如Angular Strap日期选择器依赖于提示指令。

- Bob Barker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- schacki · Accepted Answer

一般来说，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/是执行此任务的最成熟库。因此，如果您认为某些功能缺失，我强烈建议您进行修补并请求拉取。