Integrating AngularJS and Bootstrap in legacy web application

Question

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:

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.
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.

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

guru · Accepted Answer · 2014-06-12 06:18:52Z

2

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.

answered Jun 12, 2014 at 6:18

guru

4,0221 gold badge31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2858642 Over a year ago

Thanks for your answer. As described in my question (in the first possible solution), I already tried to use .bs{ import ...}, have a prefix for bootstrap and apply bootstrap for part of the page. This has been fixed some of the problem, bot popups and 3rd party component with modal layer still has a few problems because they rendered directly under body tag.

Collectives™ on Stack Overflow

Integrating AngularJS and Bootstrap in legacy web application

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related