Интеграция приложения Angular в index.php с помощью тега
Мне нужно встроить приложение Angular в файл index.pxp, используя определенный тег. На данный момент делается с помощью Angular JS.
Вопрос не зависит от языка/системы хост-страницы или другой технологии.
Моя цель состоит в том, чтобы вместо этого старого «приложения» поместить новое «app-ng» и добавить тег, который загружает это новое приложение-ng в index.php. Как мне это сделать?
Похоже, это не имеет особого отношения к PHP, который работает на стороне сервера. По сути, вы пытаетесь поместить JS-код вашего angular в HTML-документ. Я не знаком с Angular, но разве они не предоставляют документацию для подобных вещей?
Действительно, @ADyson, вы правы, должен быть больше связан с Angular. Чтобы предоставить полную информацию, я решил также подробно рассказать о части Php. Нет, конкретных вещей для этого не предусматривают. Я загрузил скриншот только потому, что моя цель не в том, чтобы предоставить конкретную строку кода, инструкцию по команде; но просто чтобы дать представление о структуре. Спасибо за попытку; у кого-то есть решение?
Тем не менее, людям, как правило, легче помочь вам, если они могут легко повторно использовать ваш исходный код в своих ответах/демо/тестах, без необходимости вводить его снова. Поэтому мы даем рекомендации по этому поводу в разных местах.
Опять же, я не эксперт по Angular, но ничего из этого вам вообще не помогло?
Нет, уже пробовал. Как сказано, спасибо за уделенное время. Кто-нибудь другой?
Вы пробовали все эти идеи?
У вас нет работоспособной версии вашего нового приложения, которая уже работает «вне» index.php? Я действительно не могу сейчас сказать, связана ли ваша проблема с PHP, или вы вообще не знаете, как правильно настроить свое приложение...?
@CBroe большое спасибо за ответ. Я попробовал использовать абсолютно простое приложение — просто создав его с помощью нового name_app. Я согласен, это не имеет отношения к php (я привел это просто для полной картины) и, конечно же, не имеет ничего общего с самим приложением Angular. Я знаю, как настроить приложение Angular, но раньше я никогда не интегрировал его в другую страницу таким образом. 100% проблема в том, как встроить типовое Angular-приложение в другую веб-страницу, используя именно эту систему (тег). Еще раз спасибо.
Просто мне нужна идея типа: это базовое приложение Angular - без ничего, кроме элемента, созданного ng new), это общая html-страница, это способ интегрировать первое во второе с помощью тега . Ничего больше. Еще раз спасибо, я согласен с вашими соображениями.
«Я попробовал использовать абсолютно простое приложение — просто создав его с помощью нового name_app». - и это не привело к созданию index.htm, содержащего необходимый код для загрузки и инициализации приложения...? Если нет, то как бы вы на самом деле смогли его запустить?
Нет, мне нужно встроить все приложение в файл index.php. Возможно, мы не поняли друг друга. Дело в том, что мне нужно встроить приложение Angular в другую веб-страницу, внешнюю по отношению к приложению. Спасибо.
Но почему вы хотите это сделать? Обычно такое приложение Angular должно представлять собой автономный внешний пользовательский интерфейс с отдельным внутренним API, с которым оно взаимодействует, возможно, размещенным в другом месте. Но, как говорит CBroe, вы, конечно же, можете создать базовое приложение, просто следуя руководству, которое работает в отдельном файле index.html. Почему бы просто не взять этот файл, не переименовать его в index.php и не продолжить? Вы можете добавить обратно все, что было в исходном файле .php (судя по вашему изображению, это действительно минимальное количество вещей).
Я предполагаю, что вы стремитесь к чему-то вроде github.com/lmame/Angular-HelloWorld/blob/master/src/index.html или или github.com/DanWahlin/Angular-HelloWorld/blob /main/src/… . Переименуйте файл в .php и вперед. Мы что-то пропустили?
Для этого вы можете использовать пользовательские элементы Angular (веб-компоненты). У меня есть запись в блоге о параллельном запуске AngularJS и Angular 17: johnfewell.com/blog/angularjs-angular17 . Вот пример запуска пользовательского элемента Angular внутри обычного HTML-файла из проекта: github.com/johnfewell/angularjs-angular17/blob/main/angularjs/… Настройка пользовательских элементов Angular требует некоторой работы. , но здесь есть хорошее объяснение: blog.bitsrc.io/diving-deep-into-angular-elements-c17a868d6894
Большое спасибо! Я попробую и дам вам знать.
Добавлю ответ, в комментариях слишком сложно
(Отзыв: у меня нет представления о том, соответствует ли первоначальный вопрос теме, и я, вероятно, сам бы не проголосовал за него. Но урезанная версия кажется более скудной, поэтому мне интересно, будет ли обрезка не помогла сделать более по теме).
Ответы 1
Для этого вы можете использовать пользовательские элементы Angular (веб-компоненты). У меня есть запись в блоге о параллельном запуске AngularJS и Angular 17; Однако этот пост в основном посвящен совместному использованию состояния между ними, поэтому он не совсем имеет отношение к вашей проблеме.
Настройка пользовательских элементов Angular требует некоторой работы, но здесь есть хорошее объяснение.
Основная идея заключается в том, что вы настроите приложение Angular как пользовательский элемент, скомпилируете его, а затем предоставите ссылки на пакеты JS в index.php. Затем вам нужно будет добавить теги для вашего пользовательского элемента в index.php как HTML, например:
<script src = "route-to-your-bundles/polyfills.js" type = "module"></script>
<script src = "route-to-your-bundles/main.js" type = "module"></script>
// Other HTML
<angular18-app></angular18-app>
Я не эксперт по PHP, поэтому не знаю, есть ли лучший способ включить JS.
Не могло быть более полезным. Я попробую всю процедуру и дам вам знать.