AngularJS将BootstrapJS和AngularJS结合使用以及为啥不要jQuery

原稿网址链接:http://ourjs.com/detail/54e18c51232227083e000034
Bootstrap  和 Angular  都是人人大批量利用的工具。在无数类型中,它们须求共同使用。为何不呢?他们早就变更了CSS和JS的开发格局,让前者既成为令人可疑的工具。

而是,把它们位于一起使用还有一对题材,越发是当您准备在Angular的序列中引入Bootstrap
JavaScript组件时,会是一个难点。当建立了Angular的类型,##您不应有加上完整的jQuery库##。
jQlite已经包蕴在Angular中的,所有jQuery须求的效应它都有。这是因为把jQuery添加到Angular的序列将很难让你完全精晓Angular的主干优势和数据绑定的力量。

诸如您想在某种程度上改动View视图,一个很好的做法是透过Angular所绑定的data数据来改变。我们写那篇小说的靶子就是为了,学习用jQuery和Angular通过分化的手段达到同等的目标。

Bootstrap JavaScript和Angular问题

那几个标题可以追溯到,你不应有在您的Angular项目中应用jQuery的口径。jQuery操作视图的章程与Angular操纵数据的措施会起争论。

何以您不该运用jQuery

你使用jQuery操作数据抓住并流入到DOM的主意大多基于事件。当大家选用Bootstrap
JavaScript组件时,比如一个按钮,大家须要“单击此按钮时,设置此按钮为激活状态”。并将那种装置添参与新加的按钮中。通过丰裕.active 类和自我批评input(要是您的按钮是一个input)为兑现。

在Angular中,操纵数据不是通过抓取和注入。一般经过数据绑定来兑现,野蛮抓取注入数据。也可以改变各种组件的情形,然则在切换时就会暴流露难题。

那就是干什么我们无法一贯用Bootstrap的JavaScript。它借助于jQuery大家不期待jQuery的毁坏大家的Angular项目。假如大家总结绑定变量到零部件,它不能工作。

解决方案: UI Bootstrap

那么该如何解决?大家从Angular得知,大家须要将数据绑定到一个特定的机件,大家理应树立一个directive 指令。那将让大家的Angular网站,更关爱数据的转移。

该解决方案是一种被称作UI Bootstrap 的类型。那是由Angular
UI团队开发的,扩张了无数Angular的恢弘组件。UI Bootstrap不选用jQuery;
它为每个Bootstrap JS组件添加了放置指令(directives)。

对此UI Bootstrap(非BootstrapJS)的渴求是:

  • 没有jQuery的依赖
  • 依赖Angular
  • 依赖Bootstrap CSS文件

就是这么。现在,大家要什么样将它集成到大家的项目?

我们的Angular应用

让大家来探视大家需求些什么设置。假如您已经看过JavaScript代码,你会看出我们创设了一个Angular模块和控制器。然后,大家创设的按钮和折叠的变量。

为此,下一步就是要得到UI
Bootstrap的公文,放到我们的连串中。那么我们可以在大家的Angular模块中导入ui.bootstrap。就这么,我们就可以获得必要效法BootstrapJS组件的命令(directives
)!

AngularJS 1

明天,正确的应用方法是,当按下按钮时调整这一个变量的值。

运用UI Bootstrap按钮指令(Directive)

因而UI Bootstrap文档 ,使用复选框按钮正确的章程是添加 ng-model
的定义对象,并添加 btn-checkbox 属性。下边是大家按钮的代码:

AngularJS 2

前几天,当大家点击按钮时,大家可以见到该模型的更动,就如大家意在的那样。

选择UI Bootstrap折叠指令

对此折叠,大家将按照isCollapsed变量的值打开和倒闭面板。由此,我们将应用
ng-click=”isCollapsed=!isCollapsed”。那将触及大家的isCollapsed变量从而切换面板。

AngularJS 3

当今,我们八个零部件都能够干活了!在雅观时髦的Angular中,设置一个变量,瞅着它影响局地视图。

在线示例: http://codepen.io/sevilayha/pen/ExKGs

相关文章