另一页中嵌入角应用程序？ [英] Embed Angular App within another page?

问题描述

我正在写一个JavaScript的应用程序，它被称为另一个页面，我不控制之内。我希望能够嵌入一个角JS应用程序，但如何处理，而无需修改URL路由？如何将测试在此情况下（即E2E）工作的？

I'm writing a javascript app which is called within another page I do not control. I'd like to be able to embed an Angular JS app, but how do I handle routing without modifying the URL? How would testing (ie. e2e) work in this scenario?

编辑：的应用程序是一个字preSS插件，它是在话语preSS仪表盘重叠，因此​​，URL和页面历史不能被修改。该应用程序将被绑定到这是在页面中嵌入一个div，并覆盖在使用CSS现有的内容。

The app is a wordpress plugin which is overlayed on the Wordpress dashboard, therefore the URL and Page History cannot be modified. The app will be bound to a div which is embedded in the page, and overlayed on existing content using CSS.

推荐答案

我相信你可以来电咨询AngularJS和您的应用程序，并使用钩子提供必要的HTML。有几件事情要注意，虽然

I believe you can just inquire AngularJS and your app, and using hooks to provide necessary HTML. A few things to note though:

• 由于URL不能改变，你应该（用URL哈希值），而不是HTML5模式下使用路由器在传统模式下。



• 既然你在生成的URL运行时， templateURL 一定还是动态构建。
  例如，对于OUPUT URL脚本标记你的插件文件夹：

• Because the URL cannot be changed, you should use router in legacy mode (using URL hash) instead of HTML5 mode.

• Since you're running in generated URL, the templateURLs must be built dynamically. For example, ouput a script tag for URL to your plugin folder:

<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

This works, but in general I will avoid using routes in such situations. This cause more work in the controllers and directives, but it is safer because there could be other client side MVC apps on the page.

的 NG-应用连接到您的视图，而不是根元素体。

The ng-app is attached to the root element of your view instead of body.

有关更多的通用嵌入式应用AngularJS（以我的经验：一个书签），您需要：

For more general embedded AngularJS app (in my experience: a bookmarklet), you need to:

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



• 注入你的应用程序的JS文件。因为只有一个 NG-应用将自动bootstraped，引导你的应用程序使用手动 angular.bootstrap

• Inject AngularJS if needed (check for window.angular), CSS and HTML.

• Inject your app's JS file. Because only one ng-app will be auto bootstraped, bootstrap your app manually using angular.bootstrap

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

使用绝对URL为 templateURL ，并确保网址已经启用了CORS。

Use absolute URL for templateURL, and make sure that URL have CORS enabled.

这篇关于另一页中嵌入角应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！