Beste Möglichkeit, AngularJS und Twitter Bootstrap zu kombinieren

70

Ich möchte AngularJS und Twitter Bootstrap in einer neuen Web-App kombinieren. Es scheint, dass AngularJS-Anweisungen für Bootstrap geschrieben wurden .

Bei genauerer Betrachtung scheint es jedoch so zu sein, dass diese Anweisungen nicht den gesamten Bootstrap abdecken. Kann ich den AngularUI-Bootstrap-Code mit dem ursprünglichen Bootstrap kombinieren, um die Vollständigkeit zu gewährleisten? Kann man das überhaupt machen?

Ich bin auf ein anderes Angular-Projekt namens AngularStrap gestoßen . Kann ich alle drei kombinieren?

Was ist der beste Weg, um AngularJS und Twitter Bootstrap zu kombinieren, um die Vollständigkeit zu erhalten?

javascript angularjs twitter-bootstrap angular-ui-bootstrap angular-strap user781486
quelle

Antworten:

65

Im Allgemeinen funktioniert der CSS-Teil von Bootstrap mit AngularJS genauso wie mit Bootstrap-JavaScript. Solange Sie nur Bootstrap CSS verwenden möchten, müssen Sie nicht darüber nachdenken.

Für fast alle Bootstrap-JavaScript-Funktionen bietet AngularUI einen alternativen Ansatz. ZB funktioniert die Navigationsleiste im Allgemeinen nur mit CSS. Schauen Sie sich also einfach die Bootstrap-Dokumente an und implementieren Sie sie. Wenn Sie einige Reaktionsfunktionen für die Navigationsleiste benötigen, benötigen Sie die collapseDirektive. Ein Beispiel finden Sie hier: Angular-UI-Navigationsleiste

Wenn Sie also der Meinung sind, dass in AngularUI etwas fehlt, können Sie bitte genauer angeben, dass "nicht vollständig genug sind, um den gesamten Twitter-Bootstrap abzudecken"? Ich habe nicht den Eindruck, dass es eine allgemeine Lücke gibt.

Darüber hinaus ist http://angular-ui.github.io/bootstrap/ die ausgereifteste Bibliothek für diese Aufgabe. Wenn Sie also der Meinung sind, dass Funktionen fehlen, würde ich dringend empfehlen, diese zu patchen und eine Pull-Anfrage zu stellen.

Schacki
quelle
1
Ich sehe keine Unterstützung der Navigationsleiste. Aber ich denke, die Bibliothek sollte die ausgereifteste sein, da die meisten Leute sie benutzt haben.
user781486
7
Ich stimme Ihrer Aussage, dass ui-bootstrap das ausgereifteste Projekt ist, überhaupt nicht zu. Ihr Projekt ist bestenfalls durcheinander. Ihre API ist terribad und im Allgemeinen fand ich es unangenehm, mit Ihrem Projekt zu arbeiten. Ihr habt Popularität genossen, weil ihr als erste in der Szene aufgetaucht seid und Bootstrap mit AngularJS unterstützt. Angular Strap hat eine viel angenehmere API und bietet insgesamt ein angenehmeres Programmiererlebnis.
Bob Barker
17

Der Code kann kombiniert werden, indem Sie Ihre eigenen Angular-Anweisungen schreiben, die HTML mit Bootstrap-Klassen generieren. Ich arbeite an einer ähnlichen Webanwendung, die Bootstrap mit Angular kombiniert. Was ich dort gemacht habe, war ungefähr so:

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

Und der Inhalt von menu.html ist:

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

Und die Richtlinie wird so verwendet:

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

Grundsätzlich besteht meine Anweisung darin, eine Bootstrap- Navigationsleiste in eine Seite einzufügen .

ABucin
quelle
4

Angular Strap unterstützt Navbar. Erfahrungsgemäß können Sie UI Boostrap auch Modul für Modul mit Angular Strap mischen. In beiden Projekten können Sie ihre Komponenten für einen benutzerdefinierten Build wie folgt einfügen:

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

Sie können und werden jedoch miteinander in Konflikt stehen. IE Sie können nicht das UI-Bootstrap-Modal und das Winkel-Strap-Modal im selben Projekt haben. Darüber hinaus sind einige der Direktiven aus beiden Projekten von anderen Modulen abhängig, z. B. hat die Angular Strap-Datumsauswahl eine Abhängigkeit von der Tooltip-Direktive.

Bob Barker
quelle