Question

我想将AngularJS和Twitter Bootstrap整合到一个全新的网络应用程序中。看起来像AngularJS directives have been written for Bootstrap。

然而，仔细观察，似乎这些指令并未涵盖所有Bootstrap。我可以将AngularUI Bootstrap代码与原始Bootstrap结合使用以获得完整性吗？它可以在第一时间完成吗？

我偶然发现了另一个名为AngularStrap的Angular项目。我能把这三个结合起来吗？

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

Answer 1

通常，Bootstrap的CSS部分与AngularJS的工作方式完全相同，因为它与Bootstrap JavaScript一起使用。因此，只要您只想使用Bootstrap CSS，就不必考虑它。

对于几乎所有的Bootstrap JavaScript功能，AngularUI提供了另一种方法。例如。导航栏通常只使用CSS，所以只需查看Bootstrap文档并实现它。如果您需要导航栏的某些响应功能，则需要collapse指令;例如，请参见此处：angular-ui navbar

因此，如果您认为AngularUI中缺少任何内容，您是否可以更具体地使用＆＃34;不够完整以涵盖整个Twitter Bootstrap＆＃34;？我不认为存在普遍差距。

此外，http://angular-ui.github.io/bootstrap/是该任务最成熟的库。因此，如果您认为缺少某些功能，我强烈建议您修补它并发出拉取请求。

Answer 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 导航栏注入页面。

Answer 3

Angular Strap支持导航栏，从经验来看，您可以逐个模块地将ui boostrap与角带混合在一起。两个项目都允许您为自定义构建注入其组件，如下所示：

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

然而，他们可以并且将会相互冲突。 I.E你不能在同一个项目中使用ui-bootstrap模态和角度模态模式。此外，两个项目的某些指令依赖于其他模块，例如，Angular Strap日期选择器依赖于tooltip指令。

结合AngularJS和Twitter Bootstrap的最佳方式

3 个答案: