结合AngularJS和Twitter Bootstrap的最佳方法


70

我想将AngularJS和Twitter Bootstrap结合到一个新的Web应用程序中。似乎已为Bootstrap编写了AngularJS指令

但是,仔细看,这些指令似乎并不涵盖所有的Bootstrap。我可以将AngularUI引导程序代码与原始引导程序结合使用以获得完整性吗?首先可以做到吗?

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

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

Answers:


65

通常,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/是最成熟的任务库。因此,如果您认为缺少功能,我强烈建议打补丁并提出拉取请求。


1
我看不到导航栏受支持。但是我想该库应该是自大多数人使用以来最成熟的库。
user781486 2014年

7
我非常不同意您关于ui-bootstrap是最成熟的项目的说法。您的项目充其量是混乱的。您的API非常糟糕,总的来说,我发现您的项目不适合使用。你们之所以喜欢它,是因为你们是第一个出现在现场并支持angularJS引导的人。Angular Strap具有更令人愉悦的API,并且总体而言提供了更令人愉悦的编程体验。
2014年

17

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


4

Angular Strap支持navbar,从经验上来讲,您也可以在模块之间将ui boostrap与angulartrap混合使用。这两个项目都允许您为自定义构建注入其组件,如下所示:

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

但是,它们可以并且将彼此冲突。IE,您不能在同一项目中拥有ui-bootstrap模态和角度带模态。另外,两个项目中的某些指令都依赖于其他模块,例如,Angular Strap日期选择器依赖于工具提示指令。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.