web-dev-qa-db-fra.com

Meilleure façon de combiner AngularJS et Twitter Bootstrap

Je voudrais combiner AngularJS et Twitter Bootstrap) dans une nouvelle application Web. Il semble que les directives AngularJS ont été écrites pour Bootstrap .

Cependant, à bien y regarder, il semble que ces directives ne couvrent pas tout Bootstrap. Puis-je combiner le code AngularUI Bootstrap avec le code d'origine Bootstrap pour obtenir l'exhaustivité? Peut-on le faire en premier lieu?)?

Je suis tombé sur un autre Angular angulaire appelé AngularStrap . Puis-je combiner les trois?

Quelle est la meilleure façon de combiner AngularJS et Twitter Bootstrap pour obtenir l’exhaustivité?

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-strap
70
user781486

Généralement, la partie CSS de Bootstrap fonctionne exactement de la même façon avec AngularJS, de la même manière qu’elle fonctionne avec Bootstrap JavaScript. Aussi longtemps que vous voulez uniquement utiliser = Bootstrap CSS, vous n’avez pas à y penser).

Pour la quasi-totalité des Bootstrap, AngularUI fournit une approche alternative. Par exemple, la barre de navigation ne fonctionne en général qu'avec CSS, il suffit donc de regarder Bootstrap docs Si vous avez besoin de fonctionnalités réactives pour la barre de navigation, vous aurez besoin de la directive collapse, pour un exemple, voir ici: angular-ui navbar

Donc, si vous pensez que quelque chose manque dans AngularUI, pourriez-vous être plus précis avec "ne sont pas assez complets pour couvrir l'intégralité du Twitter Bootstrap"? Je n'ai pas l'impression qu'il y ait un fossé général.

De plus, http://angular-ui.github.io/bootstrap/ est la bibliothèque la plus mature pour la tâche. Donc, si vous pensez qu'il manque des fonctionnalités, je vous recommande fortement de le corriger et de faire une demande d'extraction.

65
schacki

Le code peut être combiné en écrivant vos propres directives Angular) qui génèrent du HTML contenant Bootstrap. Je travaille sur une application Web similaire qui combine Bootstrap avec Angular. Ce que j’ai fait là-bas ressemblait à ceci:

app.directive('trackerMenu', function(){
    return {
        restrict: 'E',
        templateUrl: "partials/menu.html"
    };
});

Et le contenu de menu.html est:

<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>

Et la directive est utilisée comme ceci:

<body ng-class="togglePadding()" ng-controller="RootCtrl">
    <tracker-menu></tracker-menu>
</body>

Fondamentalement, ma directive consiste à injecter un Bootstrap barre de navigation = dans une page.

17
ABucin

Angular Strap prend en charge navbar. Parlant d’expérience, vous pouvez également associer un boostrap à une angular), module par module. Les deux projets vous permettent d’injecter leurs composants pour une construction personnalisée, comme suit:

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

Cependant, ils peuvent et seront en conflit les uns avec les autres. En d'autres termes, vous ne pouvez pas utiliser les modales ui-bootstrap et angular dans le même projet. De plus, certaines des directives des deux projets ont des dépendances sur d'autres modules, par exemple Angular Strap a une dépendance sur la directive info-bulle.

4
Bob Barker