javascript - 在另一个页面中嵌入 Angular App？

Question

我正在编写一个在我无法控制的另一个页面中调用的 javascript 应用程序。我希望能够嵌入 Angular JS 应用程序，但如何在不修改 URL 的情况下处理路由？在这种情况下，测试(即 e2e)将如何工作？

编辑:该应用程序是一个叠加在 Wordpress 仪表板上的 wordpress 插件，因此无法修改 URL 和页面历史记录。该应用程序将绑定(bind)到页面中嵌入的 div，并使用 CSS 覆盖现有内容。

Answer 1

我相信你可以查询 AngularJS 和你的应用程序，并使用钩子(Hook)提供必要的 HTML。不过有几点需要注意:

• 因为无法更改 URL，所以您应该在传统模式(使用 URL 哈希)而不是 HTML5 模式下使用路由器。

• 由于您在生成的 URL 中运行，因此必须动态构建 templateURL。 例如，将 URL 的脚本标记输出到您的插件文件夹:

  <script>var MY_PLUGIN_BASE = '<?php echo plugins_url(); ?>'</script>
  

  然后使用该常量定义您的路由和 templateURL:

  $routeProvider
    .when('/', {
      templateUrl: MY_PLUGIN_BASE+'my-plugin/views/main.html',
      controller: 'Main'
    })
  

  这是可行的，但通常我会避免在这种情况下使用路由。这会导致 Controller 和指令中的更多工作，但它更安全，因为页面上可能还有其他客户端 MVC 应用程序。

• ng-app 附加到 View 的根元素而不是 body。

---

对于更通用的嵌入式 AngularJS 应用程序(以我的经验:书签)，您需要:

• 如果需要，注入(inject) AngularJS(检查 window.angular)、CSS 和 HTML。

• 注入(inject)您应用的 JS 文件。因为只有一个 ng-app 会被自动引导，所以使用 angular.bootstrap

  手动引导您的应用

  angular.bootstrap(document.getElementById('my-app'), ['MyApp'])
  

• 为 templateURL 使用绝对 URL，并确保该 URL 启用了 CORS。

• 同样，尽可能避免使用路线。对于 Wordpress 插件，我们很确定没有其他应用程序使用 hash 进行路由(Wordpress 使用的是 Backbone，但我没有看到路由)，但通常页面上已经有一个处理路由的 MVC 应用程序.