Beste Möglichkeit, AngularJS und Twitter Bootstrap zu kombinieren

Question 1

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?

Question 2

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.

Question 3

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 .

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