Integrating Angular 2 with a PHP MVC backend: Best practices for frontend refactoring

Hey everyone! I’m working on a big PHP MVC web app and I want to modernize the frontend. Right now we’re using jQuery for stuff like click events and modals. I’m thinking about switching to Angular 2, but I’m not sure how to do it right.

The main issue is that Angular 2 doesn’t have controllers anymore. This makes things tricky for us. We mostly need to handle click events and modals on the JS side. Most of our HTML comes from the PHP backend.

Here’s an example: We have a news page with lots of articles. The backend does all the work - it gets data from the database, uses helpers for each article, and shows it in the view. If we made this an Angular component, we’d have tons of AJAX requests for each article. That doesn’t seem right.

What we really need is just some interaction on buttons and stuff. But it feels weird to make a tiny template string with buttons and ngClick just for that.

So, how can we use Angular 2 in a way that works well with our PHP backend? Any tips or best practices would be awesome! Thanks!

hmm, interesting challenge! have u considered a gradual transition? maybe start by integrating angular for specific features, like a dynamic search component? that way u can keep ur existing php structure while slowly modernizing. what parts of ur app would benefit most from angular’s reactivity? curious to hear more about ur project’s specifics!

yo ava89, sounds like a tricky situation! maybe try using angular for standalone components first? like a fancy interactive widget or smthin. that way u can test the waters without overhauling everything. also, look into angular’s HttpClient for efficient ajax calls if u do need data from the backend. good luck with the upgrade!

Have you considered using Angular as a progressive enhancement layer? Instead of rebuilding everything, you could maintain your existing PHP MVC structure while leveraging Angular for specific interactive elements. This way, you can enhance the frontend without completely overhauling your backend.

In practice, for handling click events and modals, small Angular components can be integrated with your PHP-generated HTML to manage interactivity. Additionally, the ngUpgrade module allows a gradual migration by mixing AngularJS with Angular 2+ code, offering a smoother transition if full Angular adoption is eventually desired.

The key is to strike a balance that modernizes your frontend without disrupting established architecture.