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

Question

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

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

Answer 1

我相信您可以查询AngularJS和您的应用程序,并使用钩子提供必要的HTML.有几点需要注意:

• 由于无法更改URL,因此应在遗留模式下使用路由器(使用URL哈希)而不是HTML5模式.

• 由于您在生成的URL中运行,因此templateURL必须动态构建s.例如,将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应用程序(根据我的经验:书签),您需要:

• 如果需要(检查window.angular),CSS和HTML 注入AngularJS .

• 注入你的应用程序的JS文件.因为只有一个ng-app将自动引导,所以使用手动引导您的应用程序angular.bootstrap

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

• 使用绝对URL templateURL,并确保URL已启用CORS.

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