55

I've just been comparing these 2 frontend frameworks and from what I can tell, they seem to do the exact same thing in terms of providing the dev with an HTML, CSS and JS frontend.

Boostrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development. (over 53 000 starred on GitHub)

Angular.js: AngularJS is a structural framework for dynamic web apps. (12 000 starred on GitHub)

The ratings mean nothing, but I just thought I'd put it in there to show that this isn't some 'quickie' question that I didn't research.

From what I've understood of Angular through wikipedia, it aims to completely separate the frontend design/layout/ui from the backend - where the database is, the web server is and where the business logic happens.

From what I understand of bootstrap (with its JS) you can achieve this exact same thing.

The angular site mentions:

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Now I'm not sure if they're taking potshots at something like backbone or maybe even bootstrap (and if you get offended easily, then ignore the potshots comment), but to me, I just can't make out what real and true differences there are between the 2.

Maybe there's some advanced info about the DOM or some other minute/tiny aspect/s of JS or HTML that make the 2 different, but I just don't see it.

PS. No SOF question like this exists, nor do any blogs speak about it (unless it is ranked very low or I'm asking the wrong way).

I also discovered that some people are working on porting over aspects of bootstrap to angular.

Edit: Thinking about it, I realized that bootstrap offers that resizing option for different screen views, I'm not sure if angular does. If not, is that the only difference?

4

4 回答 4

57

Bootstrap 是一个设计框架,用于构建简单、美观的组件和响应式设计。它还具有基本的 js 组件,可以使任何开发人员的生活变得更轻松,尤其是后端开发人员,他们对 HTML 设计规则不是很有经验。

因此,只需放置 css,检查示例,然后将其复制到您的项目中。这是 Bootstrap 的主要流程。

Angular 是一个 JS 框架,用于构建复杂的 Web 应用程序。它符合 Backbone、Ember Js。

举一个简单的表单示例,您希望在 Submit 上进行 ajax 调用。现在您可以通过 Bootstrap CSS 制作漂亮的表单,但是您需要使用 javascript 或在本例中使用 angular 来进行 ajax 调用并执行所需的功能。

这些在网络应用程序中齐头并进,它们不是竞争对手。

于 2013-07-22T04:29:10.463 回答
57

BootstrapAngularJS是两个非常不同的框架。

来自 SO 标签信息

推特引导

Bootstrap 是 Twitter 的一个前端框架,旨在启动 web 应用程序和网站的开发。除其他外,它包括用于排版、图标、表单、按钮、表格、布局网格、导航的基本 CSS 和 HTML,以及自定义构建的 jQuery 插件和对响应式布局的支持。

AngularJS

AngularJS 是一个开源 JavaScript 框架,用于构建以 CRUD 为中心的 AJAX 风格的 Web 应用程序。它的目标是通过对构建动态 Web 应用程序有用的指令来填充浏览器以增加 HTML 词汇表。

Angular 附带的指令添加了 2 向数据绑定、DOM 控制和展开、代码隐藏 DOM、表单验证和深度链接。

根据我对引导程序(及其 JS)的理解,您可以实现完全相同的目标。

没有同样的事情不能通过引导来实现。AngularJS 为您提供诸如 2-way 数据绑定、深度链接、路由、过渡动画等功能。bootstrap 提供基于 jquery 的自定义插件、酷炫的外观和感觉、用于媒体查询的 css 类等。它们非常棒,因为 angular 可以与其他库一起使用。

于 2013-07-22T04:32:27.067 回答
6

Angular 和 Bootstrap 首先,Angular 和 Bootstrap 不是替代品,而是互补的。意思是一个不被另一个替代,但它们可以组合在一起,可以相互补充。换句话说,它们处理 Web 应用程序的不同方面。因此,它们在任何意义上都没有可比性。但是,它们之间的区别和相似之处可以通过以下项目符号来说明。

什么是角?

  • 由谷歌开发和维护
  • 全面的客户端(朋友端)JavaScript 框架
  • 专为雄心勃勃的 JavaScript 单页应用程序而设计
  • 提供一组组件来构建您的应用程序并组织项目
  • 前端的逻辑层以模块、指令、数据绑定的形式很好地包裹起来

Angular 不是什么?

  • 不提供 CSS 样式、网格类或 JavaScript 组件(如 Modal、Tabs、Navigation Bar、Dropdown menu)

什么是引导程序?

  • 由 Twitter 开发,现已开源
  • 一组结构良好的 CSS 样式、网格类和 JavaScript 组件有助于动画,创建漂亮的小部件(否则必须自己编写)
  • 易于构建响应式设计,非常适合小型项目,无需太多定制和开发工作

Bootstrap 不是什么?

  • 不为应用程序提供结构
  • 不提供通用功能(如路由、控制器和模型、MV* 架构)

共同点(Angular & Bootstrap)

  • 朋友端框架
  • 巨大的开源支持
  • 附带一组预定义的组件以加快/简化开发

对比(Angular 与 Bootstrap)

  • JS(结构)框架与 CSS(主题)框架
  • 处理逻辑与处理样式
  • 健壮的框架与小规模的框架
  • 对于单页应用程序与任何结构
于 2018-03-22T06:02:56.450 回答
0

很好的答案@tony Puthenveettil 添加(并在 5000 英尺的高度进行)。让我们假设您的网站是您自己的实体百货商店。您的百​​货商店的设计将主要领域:

  1. 您希望如何将您的商店划分为不同的部分,例如:牛奶和早餐 b. 薯片和巧克力 c. cererls 和天然食品 d. 肉和鸡肉

  2. 你如何创建每个部分的布局

虽然你们中的一些人可能会认为为什么我们需要划分你的商店。但最终,它非常重要。因为它会更容易管理和维护你的东西。

想象一下你的商店没有订单,不同的物品被放置在不同的区域

例如,您会在巧克力旁边找到肉类冰箱。奇怪吧?难以管理和维护。是的 !

所以我们需要对你的各个部分进行划分。

现在让我们跳转到每个部分的外观。与肉类相比,您可能希望放置不同的信息和不同的外观来组织巧克力。虽然您的肉类部分可能是大冰箱,但您的巧克力部分可能有打开的托盘!

所以你的隔间创建和维护是 Angular 的帮助。冰箱或打开的托盘,就是 bootstrap!

于 2018-05-03T01:49:17.333 回答