javascript - form - La mejor manera de combinar AngularJS y Twitter Bootstrap
popover form bootstrap 4 (3)
Angular Strap soporta barra de navegación, también hablando por experiencia, puedes mezclar ui boostrap con correa angular módulo por módulo. Ambos proyectos le permiten inyectar sus componentes para una compilación personalizada como esta:
angular.module(''myApp'', [
''mgcrea.ngStrap.modal'',
''mgcrea.ngStrap.aside'',
''ui.bootstrap.popover''
]);
Sin embargo, pueden y entrarán en conflicto entre ellos. IE no puede tener el modal ui-bootstrap y el modal de correa angular en el mismo proyecto. Además, algunas de las directivas de ambos proyectos tienen dependencias con otros módulos, por ejemplo, el selector de fecha Angular Strap tiene una dependencia en la directiva de información sobre herramientas.
Me gustaría combinar AngularJS y Twitter Bootstrap en una nueva aplicación web. Parece que las directivas AngularJS se han escrito para Bootstrap .
Sin embargo, con una mirada cuidadosa, parece que estas directivas no cubren todo Bootstrap. ¿Puedo combinar el código AngularUI Bootstrap con el Bootstrap original para obtener la integridad? ¿Se puede hacer en primer lugar?
Me encontré con otro proyecto angular llamado AngularStrap . ¿Puedo combinar los tres?
¿Cuál es la mejor manera de combinar AngularJS y Twitter Bootstrap para obtener integridad?
El código se puede combinar escribiendo sus propias directivas angulares que generan HTML que tiene clases de Bootstrap. Estoy trabajando en una aplicación web similar que combina Bootstrap con Angular. Lo que hice allí fue algo como esto:
app.directive(''trackerMenu'', function(){
return {
restrict: ''E'',
templateUrl: "partials/menu.html"
};
});
Y el contenido de menu.html es:
<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>
Y la directiva se usa así:
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
Básicamente, lo que hace mi directiva es inyectar una barra de navegación de Bootstrap en una página.
En general, la parte CSS de Bootstrap funciona exactamente de la misma manera con AngularJS, ya que funciona con JavaScript Bootstrap. Por lo tanto, siempre que solo desee utilizar Bootstrap CSS, no tiene que pensar en ello.
Para casi todas las funciones de Bootstrap JavaScript, AngularUI ofrece un enfoque alternativo. Por ejemplo, la barra de navegación en general solo funciona con CSS, así que simplemente mira los documentos de Bootstrap e impleméntala. Si necesita algunas características de respuesta para la barra de navegación, necesitará la directiva de collapse ; para un ejemplo vea aquí: barra de navegación angular-ui
Entonces, si crees que falta algo en AngularUI, ¿podrías ser más específico con "no son lo suficientemente completos para cubrir todo el Twitter Bootstrap"? No tengo la impresión de que haya una brecha general.
Además, http://angular-ui.github.io/bootstrap/ es la biblioteca más madura para la tarea. Entonces, si crees que faltan características, te recomiendo encarecidamente aplicar un parche y hacer una solicitud de extracción.