如何从 jQuery 插入的选择器动态加载 Angular 组件



我们有一个混合遗留应用程序,由Spring MVC,jsp和jQuery实现的用例组成。每个用例都是由 jsp/jQuery 组成的"组件"构建的 SPA。每个组件都使用 innerHTML + AJAX 动态加载。

我们希望开始一次重写一个组件的应用程序,而更好的方法是在最内层创建 Angular 组件,然后向外聚合它们,直到每个用例都是同构的 Angular 应用程序。

有没有一种"干净"的方式来在DOM的jQuery加载部分使用Angular组件,例如,当遗留的jQuery在DOM"外部"angular root应用程序之外插入选择器时,通过动态引导角度组件,类似于使用Angular动态将组件添加到DOM中,除了从angular内部。这意味着:从jQuery中,告诉angular有一个新的选择器来引导。

我们最终所做的(到目前为止)是在启动时引导角度组件,但将它们隐藏起来。在 AJAX 调用更新了 DOM 之后,我们使用 jQuery 将每个组件移动到 DOM 的更新部分。

工作很棒,保持角度代码干净,不知道jQuery,所以当所有jQuery被替换时它保持不变。

为了将参数传递给角度,我们使用带有哈希策略的角度路由器,以便jQuery可以通过更改url来传递参数。(当应用程序是纯 Angular 时,将迁移到基于推送的。

最新更新