OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

将BootstrapJS和AngularJS结合使用以及为什么不用jQuery


分享到
分类 大话编程   关键字 分享   发布 ourjs  1424067665841
注意 转载须保留原文链接,译文链接,作者译者等信息。  
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中,设置一个变量,看着它影响一些视图。


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








相关阅读:

AngularJS在大型单页面应用中的性能优化(一)
我们抛弃了AngularJS:单页面应用的5大缺陷

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 理解Node.js的事件循环(Event Loop)和线程池
  3. 让我们写快速的JavaScript,JS性能优化小窍门
  4. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  5. CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
  6. 什么是Viewport Meta(width详解)及在手机上的应用
  7. 专为控制打印设计的CSS样式
  8. RedMonk的语言排名:JavaScript,Java保持领先;Go未进前20
  9. Java官方安装包捆绑百度卫士杀毒软件
  10. 通过Web Audio API可视化输出MP3音乐频率波形
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 大话编程
  1. Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor
  2. JavaScript中的$$(*)代表什么和$选择器的由来
  3. javaScript 依赖管理
  4. JavaScript代码组织结构良好的5个特点[reuqire.js]
  5. 怎样用纯HTML和CSS更改默认的上传文件按钮样式
  6. 今天我去面试, 受打击了:你是学 .net 的吧?
  7. JavaScript中的继承,构造函数以及new关键字的作用
  8. fibjs 比 nodejs 快五倍
  9. 痛苦的Java程序员
  10. OneBody:开源的社交网络,邮件列表,词典和内容管理系统

 关键字 - 分享
  1. 界面控件包TMS IntraWeb Component Pack Pro Script Edition发布v5.8.8.1
  2. 今年最新的30个Android库,你了解吗?
  3. Kendo UI ASP.NET MVC使用教学视频集锦(高清在线观看)
  4. IntelliJ IDEA使用技巧——关于版本控制(上)
  5. 图表编辑器TMS Diagram Studio更新至v4.14,支持RAD Studio 10.2 Tokyo
  6. Windows网络守门人UserLock教程:让用户、组或组织单位进行同步会话
  7. Kendo UI Grid中的动态数据(三)
  8. IntelliJ IDEA使用技巧——常用快捷键Mac篇
  9. Windows网络守门人UserLock教程:UserLock教程:阻止规定时间以外的访问连接
  10. 一流的报表产品Nevron Chart for SSRS更新v2016.1丨附下载

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号