Лучший способ объединить AngularJS и Twitter Bootstrap

Question

Лучший способ объединить AngularJS и Twitter Bootstrap

71

Я хотел бы объединить AngularJS и Twitter Bootstrap в новое веб-приложение. Похоже, Директивы AngularJS были написаны для Bootstrap.

Однако, при внимательном рассмотрении, кажется, что эти директивы не охватывают все Bootstrap. Могу ли я объединить код AnglerUI Bootstrap с исходным бутстрапом, чтобы получить полноту? Можно ли это сделать в первую очередь?

Я наткнулся на другой проект Angular под названием AngularStrap. Могу ли я объединить все три?

Каков наилучший способ объединить AngularJS и Twitter Bootstrap, чтобы получить полноту?

user781486 15 март 2014, в 09:25

Теги:

angular-ui-bootstrap

angular-strap

3 ответа

16

Код можно объединить, написав собственные директивы Angular, которые генерируют HTML, который имеет классы Bootstrap. Я работаю над аналогичным веб-приложением, которое объединяет Bootstrap с Angular. То, что я там делал, было примерно так:

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.

ABucin 15 март 2014, в 11:24

3

Angular Ремень поддерживает навигатор, также, исходя из опыта, вы можете смешивать ui boostrap с ремешком angular на модуле по модулю. Оба проекта позволяют вам вводить свои компоненты для пользовательской сборки следующим образом:

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

Однако они могут и будут конфликтовать друг с другом. I.Е вы не можете использовать модем ui-bootstrap и модальный ремешок angular в том же проекте. Кроме того, некоторые из директив обоих проектов имеют зависимости от других модулей, например, angular Strap date picker имеет зависимость от директивы всплывающей подсказки.

Bob Barker 02 авг. 2014, в 06:31

Ещё вопросы

schacki · Accepted Answer · 2014-03-15T11-31-00.000Z

Как правило, часть CSS Bootstrap работает точно так же, как с AngularJS, поскольку она работает с JavaScript Bootstrap. Так что пока вы только хотите использовать Bootstrap CSS, вам не нужно об этом думать.

Для почти всех функций JavaScript Bootstrap, AngularUI предоставляет альтернативный подход. Например. navbar вообще работает только с CSS, поэтому просто посмотрите на документы Bootstrap и реализуйте его. Если для навигационной панели требуются некоторые функции реагирования, вам потребуется директива collapse; для примера см. здесь: angular -ui navbar

Итак, если вы думаете, что в AngularUI чего-то не хватает, не могли бы вы уточнить, что "недостаточно полны, чтобы охватить весь загрузочный лоток Twitter"? У меня нет впечатления, что есть общий пробел.

Более того, http://angular-ui.github.io/bootstrap/ является самой зрелой библиотекой для задачи. Поэтому, если вы считаете, что функции отсутствуют, я настоятельно рекомендую ее исправить и сделать запрос на перенос.

Я не вижу, чтобы Navbar был поддержан. Но я думаю, что библиотека должна быть самой зрелой, так как большинство людей ее использовали.
Я категорически не согласен с вашим утверждением, что ui-bootstrap - самый зрелый проект. Ваш проект в лучшем случае запутан. Ваш API-интерфейс terribad, и в целом мне неприятно работать с вашим проектом. Вы, ребята, пользовались популярностью, потому что вы были первыми, кто появился на сцене и поддержал загрузку с angularJS. Angular Strap имеет гораздо более приятный API и в целом предлагает более приятный опыт программирования.
Это mgcrea.github.io/angular-strap для Googglical оспаривается