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

Question

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

编辑：该应用是一个wordpress插件，它叠加在Wordpress信息中心上，因此无法修改网址和网页历史记录。该应用程序将绑定到嵌入在页面中的div，并使用CSS覆盖在现有内容上。

Answer 1

我相信您可以查询AngularJS和您的应用，并使用钩子提供必要的HTML。有几点需要注意：

• 由于无法更改网址，因此您应该在传统模式下使用路由器（使用网址哈希）而不是HTML5模式。

• 由于您在生成的网址中运行，因此必须动态构建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'
    })
  

  这有效，但总的来说我会避免在这种情况下使用路线。这导致控制器和指令中的更多工作，但它更安全，因为页面上可能有其他客户端MVC应用程序。

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

---

对于更一般的嵌入式AngularJS应用程序（根据我的经验：书签），您需要：

• 如果需要，请注入AngularJS（检查window.angular），CSS和HTML。

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

  手动启动您的应用

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

• 使用templateURL的绝对网址，并确保该网址已启用CORS。

• 同样，尽可能避免使用路线。对于Wordpress插件，我们非常确定没有其他应用程序使用哈希进行路由（Wordpress使用Backbone，但我没有看到路由），但一般情况下，页面上已经有一个处理路由的MVC应用程序