Можно ли интегрировать Angular.js (Angular 1) и AEM (Adobe Experience Manager 6.2)

Я не могу включить все, что мне нужно, чтобы ответить на заголовок, поэтому вот что меня касается:

  • Должна ли клиентская среда/библиотека требоваться при разработке AEM? Если да, то какой из них лучше всего подходит для AEM и прост для разработки (Angular.js - это именно то, что я считаю "достаточно" хорошим и простым для интеграции).
  • In case of using angular.js, I have some doubts:
    • Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
    • ИМО, большинство внешних ng-app будут загружены в шаблон (что требуется для всех компонентов, но это только в теории (я не уверен в этом), и я не вижу здесь ни одного примера, показывающего, как загружать JS, Файлы CSS при создании ШАБЛОНА (не при создании компонента, просто для ясности)
    • Альтернативный подход, каждый компонент AEM будет отдельным угловым модулем, и он будет загружаться вручную (я тоже не уверен, помогите уточнить)

И последнее, но не менее важное: если у вас есть примеры (достаточно сложные, не такие как hello world) или производственный проект, в котором использовался этот стек (отлично!), пожалуйста, помогите, дайте мне знать, потому что меня больше всего беспокоит «возможно ли это сделать».

Заранее огромное спасибо!


javascript angularjs aem adobe
person thelonglqd    schedule 06.08.2017    source источник
comment
capella.edu/online-degrees Здесь это используется. Не уверен, каково ваше точное требование, но мы можем использовать его в качестве замены jquery и делать все остальное. Добавьте ng-app вашего основного шаблона, чтобы все страницы, созданные из него, имели доступ к ng-app, и мы можем добавить угловой код в любой компонент.   -  person Susheel Singh    schedule 06.08.2017
comment
Ваша страница может быть создана администратором (например, перетаскиванием и удалением каких-либо компонентов)?   -  person thelonglqd    schedule 06.08.2017
comment
Вся центральная часть представляет собой один компонент, который загружается на основе Json из серверной службы.   -  person Susheel Singh    schedule 06.08.2017

Ответы (2)


arrow_upward
2
arrow_downward

В настоящее время я успешно использую angular JS с AEM.

Какое приложение является самым внешним (которое инициализируется с помощью ng-app) и как мы его загружаем, потому что компонент AEM отделен, и я не могу загрузить большинство внешних приложений ни в одно из них.

ответ: для этой цели вы можете создать компонент рендерера и сделать его внешним приложением, а затем добавить в него необходимые клиентские библиотеки. после этого вы можете использовать область рендеринга как обычное угловое приложение.

ИМО, большинство внешних ng-приложений будут загружены в шаблон (что требуется для всех компонентов, но это только в теории (я не уверен в этом), и я не вижу здесь ни одного примера, покажите мне, как загрузить Файлы JS, CSS при создании ШАБЛОНА (не создание компонента, просто для ясности)

Ответ: Вместо того, чтобы загружать его в шаблон, его будет довольно легко добавить в компонент в качестве клиентской библиотеки, потому что все, что подобно js / css в AEM, мы можем добавить в качестве клиентской библиотеки.

Альтернативный подход, каждый компонент AEM будет отдельным угловым модулем, и он будет загружаться вручную (я тоже не уверен, помогите уточнить)

Ответ: Да, вы можете создать компонент как угловое приложение и загрузить его отдельно.

Вот структура каталогов для клиентской библиотеки

person Prince Gracy    schedule 21.11.2017
comment
На самом деле, в тот момент я выбрал jQuery вместо этого из соображений безопасности, я собираюсь использовать ваше решение в следующий раз с AEM (если есть), большое спасибо. - person thelonglqd; 21.11.2017

arrow_upward
0
arrow_downward

Я использовал Angular 1.x с AEM 6.x и создал SPA (одностраничное приложение). Кроме того, создано приложение AEM Screens с использованием Angular 1.x.

Там может быть много способов сделать это, но я следовал следующему подходу: -

  1. Шаблон страницы AEM (тег body) с ng-app и добавленной зависимостью angular для сайта (clientlib angular 1.x)
  2. Определите угловой модуль в клиентской библиотеке вашего сайта (JS), скажем, module.js, example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
  3. Вы также можете определить поставщика состояния для разных путей app.config(function ($stateProvider, $urlRouterProvider) {});
  4. Определите модуль/контроллер каждого компонента в конкретном файле clientlib(js). example (html): <div ng-controller="LoginCtrl" /> example (client lib(js)) - app.controller('LoginCtrl', function ($scope) {});
person Pawan Mittal    schedule 19.02.2018