/reduced-angular-testcase

Rendering Angular inside React

Primary LanguageJavaScript

Rendering Angular inside React

I'm trying to render legacy Angular controllers inside a React app. The issue is that when we browse to it through react-router, the template won't be evaluated. However, after doing a hard reload it works as expected. Can I hook into Angular template compilation, so I can trigger it on external events? (e.g.: react-router)

All the interesting code is in src/App.js.

Update: solution?

I've written a Angular controller that acts as a bridge between React-Router events and Angular template rendering. We use ng-include for async rendering. It looks something like this pseudo code:

const AngularWrapper = history.listen((location) => {
  <div ng-include={getTemplateForLocation(location)} />
})
const App = <Router><AngularWrapper /></Router>
export default App;