集成在传统的Web应用AngularJS和Bootstrap [英] Integrating AngularJS and Bootstrap in legacy web application

问题描述

我们有一个基于EXT-JS传统应用程序。
我们喜欢新的模块添加到现有的应用程序，使用AngularJS和bootsrap。
我的问题是引导的CSS与传统code的CSS冲突。
新的模块，使用引导和AngularJS这写的，由传统code缠，所以我需要进口存在在同一页上CSS和新的CSS。

我想到了两个可能的解决方案：

1. 有一个preFIX来引导的CSS文件，并只适用于网页内容（AngularJS，新的模块）的内部。问题是，弹出，和角度引导第三方组件仍遗留的CSS中断。


2. 有单独的IFrame我的整个内部页面（AngularJS模块），嵌入到网页包含传统的CSS。

好像使用的IFrame解决我的问题，但我知道，使用iframe是气馁，我找我的问题最佳的解决方案。

1. 请你认为的IFrame在这种情况下一个好的做法呢？


2. 请您还有其他行之有效的解决方案？

解决方案

计划使用iframe的只是为了让周围的CSS冲突 - 不是一个很好的主意。虽然内部框架可以在某些情况下，主要是它的使用已经被滥用只是为了轻松地解决一些问题来得心应手。

  

你认为的IFrame在这种情况下一个好的做法呢？

没有。这里唯一的问题是BS和ExtJS的之间冲突的CSS样式。并计划使用iframe来解决这个问题确实是一个不错的选择。当您使用angularjs我觉得使用iframe可能会限制它的使用在一定程度上。例如，在iframe中嵌入它，我认为导航前进和后退按钮不会工作与预期一样，如果你的计划使用angularjs路由。而使用iframe时，会很辛苦调试前端的问题。

  

你有没有其他行之有效的解决方案？

好吧，我没有一个行之有效的解决方案，但你已经提到的一个想法，可能很容易的工作。引导可以定制你想要的任何程度上使用较少的变量。
例如，对于您的问题少用刚刚命名空间中的引导方式。

  {.BS
    @import少/ bootstrap.less
}
 

和不进入使用较少/青菜编译CSS是复杂的心态。一旦你习惯了它，这将使这会令FE的研究与开发比以前容易多了。

We have a legacy application based on EXT-JS. We like to add new module into the existing application, using AngularJS and bootsrap. My problem is that bootstrap’s CSS are conflicting with CSS of the legacy code. The new module, which written using bootstrap and AngularJS, wrapped around by legacy code, so I need to import exists CSS and new CSS on the same page.

I thought of 2 possible solutions:

1. Having a prefix to bootstrap’s css file and apply it only to inner part of the page content (AngularJS, new module). The problem is that popup, and angular-bootstrap 3rd party component still interrupted by legacy CSS.
2. Having my whole inner page (AngularJS module) in separate IFrame, embedded into page that contains the legacy CSS.

It seems like using IFrame solves my problem, but I aware that using IFrame is discouraged, and I am looking for optimal solution for my problem.

1. Do you think that IFrame is a good practice in this scenario?
2. Do you have other proven solution?

解决方案

Planning to use iframes just to get around the css conflicts - not a very good idea. Though iframes can come handy in some cases mostly its usage has been abused just to get around some issues easily.

Do you think that IFrame is a good practice in this scenario?

No. The only issue here is the conflicting css styles between bs and extjs. And planning to use Iframe to get around this is really a bad choice. As you are using angularjs I feel using iframe may restrict its usage to some extent. For instance,embedding it in iframe I think the navigation back and forward buttons wont work as expected, in case your are planning to use angularjs routing. And when using Iframe it will be very hard to debug front end issues.

Do you have other proven solution?

Well I do not have a proven solution but you already have mentioned an idea which may work easily. Bootstrap can be customized to any extent you want to using less variables. For instance for your issue just namespace the bootstrap styles using less.

.bs {
    @import "less/bootstrap.less"; 
}

And don't get into the mindset using less/sass to compile css is complex. Once you get used to it, this will make this will make FE developement much easier than before.

这篇关于集成在传统的Web应用AngularJS和Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！