关键词：
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 ）！
// 创建 angular app 导入 ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope)
// BUTTONS ======================
// 设置数据
$scope.bigData = ;
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
);
现在，正确的使用方式是，当按下按钮时调整这些变量的值。
回到顶部
使用UI Bootstrap按钮指令(Directive)
通过UI Bootstrap文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
Breakfast
</label>
<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
Lunch
</label>
<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
Dinner
</label>
</div>
现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。
回到顶部
使用UI Bootstrap折叠指令
对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div collapse="isCollapsed">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
现在，我们两个组件都可以工作了！在美丽时尚的Angular中，设置一个变量，看着它影响一些视图。 参考技术A 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 ）！
// 创建 angular app 导入 ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope)
// BUTTONS ======================
// 设置数据
$scope.bigData = ;
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
);
现在，正确的使用方式是，当按下按钮时调整这些变量的值。
回到顶部
使用UI Bootstrap按钮指令(Directive)
通过UI Bootstrap文档 ，使用复选框按钮正确的方法是添加 ng-model 的定义对象，并添加 btn-checkbox 属性。下面是我们按钮的代码：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
Breakfast
</label>
<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
Lunch
</label>
<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
Dinner
</label>
</div>
现在，当我们点击按钮时，我们可以看到该模型的变化，就像我们希望的那样。
回到顶部
使用UI Bootstrap折叠指令
对于折叠，我们将基于isCollapsed变量的值打开和关闭面板。因此，我们将使用 ng-click="isCollapsed=!isCollapsed"。这将触发我们的isCollapsed变量从而切换面板。
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div collapse="isCollapsed">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
哪个弹簧视图解析器与 angularjs 配合得很好？
】哪个弹簧视图解析器与angularjs配合得很好？【英文标题】：Whichspringviewresolverplaysnicewithangularjs?【发布时间】：2014-09-1008:50:49【问题描述】：我正在编写一个使用angularjs和springmvc作为REST服务提供者和部分视图提供者的web应用程... 查看详情
AngularJS：使用框架是个好主意？
】AngularJS：使用框架是个好主意？【英文标题】：AngularJS:agoodideatouseframes?【发布时间】：2014-03-1702:57:30【问题描述】：我正在实现一个具有三面板主视图的AngularJS应用程序。布局有点像邮件系统，左侧有一个导航栏。右窗格一... 查看详情
angularjs哪个版本用的多
建议用angular2，因为angular1已经比较旧了。AngularJS与jQuery等传统操作DOM的思想有所不同。对于jQuery等，一般是先有完整DOM然后在这些DOM的基础上进行二次调教。而AngularJS 等框架则是根据数据模型以及其对应的DOM模版，然后通... 查看详情
semantic-ui前端ui框架
参考技术A官网：https://semantic-ui.com/github:https://github.com/semantic-org/semantic-ui 查看详情
前端框架哪个好
现在流行的Web前端框架有哪些？React：它最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这个库很有效地完成了它的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松... 查看详情
安卓免root框架哪个好
参考技术A纵横兔免。或者太极都挺好。框架（framework）是一个框子，指其约束性，也是一个架子，指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题。框架这个广泛的定义使用的十分流行，尤其在软件概... 查看详情
Angular JS & Semantic-UI 复选框需要双击
】AngularJS&Semantic-UI复选框需要双击【英文标题】：AngularJS&Semantic-UIcheckboxneedsdoubleclick【发布时间】：2017-02-1107:13:34【问题描述】：我尝试在使用语义UI制作的复选框上使用AngularJS进行操作：<divclass="uicheckbox"ng-click="myCtrl.va... 查看详情
bootstrap和jqueryeasyui哪个做后台管理系统更好一些
...最好的。如果真的想用bootstrap，你可以考虑使用bootstrap+angularJS参考技术A后台可以用simplebs.cn这个框架， 查看详情
哪个php框架比较好？
自己在用Phalcon，其实php框架也无非就是那么几种，互相抄袭/借鉴一下，mvc，再加对db的封装，我觉得选择的话，需要在性能、易用性、学习成本、文档是否丰富、社区是否活跃这几个条件中做出筛选，但就个人看法而言，一个... 查看详情
这么多开源框架，该用哪个好
这么多开源框架，该用哪个好？想必这样的问题，大家都有疑惑过。我想大部分的疑惑无非以下几点：这个框架稳定吗？要是有bug怎么办？这个框架能满足我的所有需求吗？如果用到一半发现不适用该... 查看详情
css#react#semantic-ui(代码片段)
求问大神现在做android的hotfix用哪个框架比较好
你可以看下这个，暂时好像还没有特别稳定的，你可以先选一个。http://blog.csdn.net/lmj623565791/article/details/49883661参考技术A谷歌框架最好 查看详情
流行框架.angularjs
AngularJS是比较新的技术，版本1.0是在2012年发布的。AngularJS是由Google的员工Mi?koHevery从2009年开始着手开发。这是一个非常好的构想，该项目目前已由Google正式支持，有一个全职的开发团队继续开发和维护他。AngularJS的设计初衷是... 查看详情
这么多开源框架，该用哪个好？
想必这样的问题，大家都有疑惑过。我想大部分的疑惑无非以下几点：这个框架稳定吗？要是有bug怎么办？这个框架能满足我的所有需求吗？如果用到一半发现不适用该怎么办？这个框架耦合度高吗？... 查看详情
如何使用AngularJS使文档准备好条件？
】如何使用AngularJS使文档准备好条件？【英文标题】：HowtomakedocumentreadyconditionalusingAngularJS?【发布时间】：2021-07-0814:48:36【问题描述】：我使用ASP.NETMVC和AngularJS作为我的框架。我有一个向MCVAction发送请求并最终被转发查看的链... 查看详情
哪个 JavaScript 框架可以搜索 CSS 样式表规则并编辑它们的属性？
】哪个JavaScript框架可以搜索CSS样式表规则并编辑它们的属性？【英文标题】：WhichJavaScript-frameworkcansearchCSSstylesheetrulesandedittheirproperties?【发布时间】：2011-10-0417:05:12【问题描述】：问题JavaScript框架（prototype、script.aculo.us、Mootool... 查看详情
移动webapp前端ui用哪个框架好
WeUIWeb开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、progress,toast、article、icon等各式元素。FrozenUI一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件。SUIMobile是一套基... 查看详情
移动webapp前端ui用哪个框架好
WeUIWeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、progress,toast、article、icon等各式元素。FrozenUIFrozenUI是腾讯社交用户体验... 查看详情