web-dev-qa-db-ja.com

AngularJSとTwitter Bootstrapを組み合わせる最適な方法

AngularJSとTwitter Bootstrapを組み合わせて新しいWebアプリにしたいと思います。 AngularJSディレクティブはBootstrap用に作成されています のようです。

ただし、注意深く見ると、これらのディレクティブはBootstrapのすべてをカバーしていないようです。 AngularUI Bootstrapコードと元のBootstrapの両方を組み合わせて完全性を確保できますか？そもそもできますか？

AngularStrap と呼ばれる別のAngularプロジェクトにつまずいた。 3つすべてを組み合わせることができますか？

AngularJSとTwitter Bootstrapを組み合わせて完全性を得る最良の方法は何ですか？

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-strap
70
user781486

通常、BootstrapのCSS部分は、Bootstrap JavaScriptで動作するのとまったく同じようにAngularJSで動作します。したがって、Bootstrap CSSのみを使用する場合は、それについて考える必要はありません。

ほとんどすべてのBootstrap JavaScript機能に対して、AngularUIは代替アプローチを提供します。例えば。一般的にnavbarはCSSでのみ動作するため、Bootstrapのドキュメントを見て実装するだけです。 navbarにレスポンシブ機能が必要な場合は、collapseディレクティブが必要です。例については、こちらを参照してください： angular-ui navbar

AngularUIに何か不足していると思われる場合は、「Twitter Bootstrap全体をカバーするのに十分ではない」ともっと具体的に説明してください。一般的なギャップがあるという印象はありません。

さらに、 http://angular-ui.github.io/bootstrap/ は、タスクの最も成熟したライブラリです。機能が不足していると思われる場合は、パッチを適用してプルリクエストを行うことを強くお勧めします。

65
schacki

Angularクラスを持つHTMLを生成する独自のBootstrapディレクティブを記述することにより、コードを組み合わせることができます。私は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 navbarをページに挿入することです。

17
ABucin

Angular Strapはnavbarをサポートします。また、経験から言えば、モジュールごとにui boostrapをangularストラップと組み合わせることができます。どちらのプロジェクトでも、次のようなカスタムビルド用にコンポーネントを注入できます。

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

ただし、それらは互いに競合する可能性があります。つまり、同じプロジェクトでui-bootstrapモーダルとangularストラップモーダルを使用することはできません。さらに、両方のプロジェクトのディレクティブの一部は他のモジュールに依存しています。たとえば、Angular St​​rap日付ピッカーはツールチップディレクティブに依存しています。

4
Bob Barker