Вставить Angular приложение на другую страницу?

Я пишу приложение javascript, которое вызывается на другой странице, которую я не контролирую. Я хотел бы иметь возможность встраивать приложение Angular JS, но как я могу обрабатывать маршрутизацию без изменения URL-адреса? Как тестирование (т.е. E2e) работает в этом сценарии?

Изменить: Приложение представляет собой плагин wordpress, который накладывается на панель инструментов Wordpress, поэтому URL и историю страниц нельзя изменить. Приложение будет привязано к div, который встроен в страницу, и накладывается на существующий контент с помощью CSS.

Ответы

Ответ 1

Я считаю, что вы можете просто запросить AngularJS и ваше приложение и использовать крючки для обеспечения необходимого HTML. Несколько замечаний:

Поскольку URL-адрес не может быть изменен, вы должны использовать маршрутизатор в устаревшем режиме (используя хеш URL-адреса) вместо режима HTML5.
Поскольку вы работаете в сгенерированном URL-адресе, templateURL должен быть создан динамически. Например, выполните тег script для 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 (по моему опыту: букмарклет) вам необходимо:

Inject AngularJS, если необходимо (проверьте window.angular), CSS и HTML.
Внедрите JS файл приложения. Поскольку только один ng-app будет автоматически загружаться, загрузите свое приложение вручную, используя angular.bootstrap
```
angular.bootstrap(document.getElementById('my-app'), ['MyApp'])
```
Используйте абсолютный URL для templateURL и убедитесь, что у этого URL есть CORS.
Опять же, избегайте использования маршрутов, если это возможно. Для плагина Wordpress мы уверены, что нет другого приложения, использующего хэш для маршрутизации (Wordpress использует Backbone, но я не вижу маршрутов), но в целом на странице, которая обрабатывает маршрутизацию, уже есть приложение MVC.