是否可以集成 Angular.js (Angular 1) 和 AEM (Adobe Experience Manager 6.2)答案

【问题标题】：Is it possible to integrate Angular.js (Angular 1) and AEM (Adobe Experience Manager 6.2)是否可以集成 Angular.js (Angular 1) 和 AEM (Adobe Experience Manager 6.2)
【发布时间】：2017-08-06 05:29:16
【问题描述】：

我无法包含所有我需要回答标题的内容，所以这是我关心的问题：

开发 AEM 时必须需要客户端框架/lib 吗？如果是的话，什么是最适合 AEM 且易于开发的（Angular.js 正是我认为它“足够”好且易于集成的方式）。
在使用angular.js的情况下，我有一些疑问：
- 哪个是最外部的应用程序（使用ng-app 初始化）以及我们如何加载它，因为 AEM 组件是分离的，我无法在其中任何一个中加载最外部的应用程序。
- IMO，大多数外部ng-app 将被加载到模板中（所有组件都需要它，但这只是理论上的（我不确定），我没有看到任何示例向我展示如何在创建模板时加载 JS、CSS 文件（不是组件创建，只是为了清楚）
- 替代方法，每个 AEM 组件将是一个单独的 Angular 模块，它会手动引导（我也不确定，请帮助澄清）

最后但同样重要的是，如果您有使用此堆栈的示例（足够复杂，不像 hello world）或生产项目（完美！），请帮助让我知道，因为我最关心的是“是否有可能做”。

提前非常感谢！

【问题讨论】：

capella.edu/online-degrees 这里用到了。不确定您的确切要求，但我们可以将其用作 jquery 的替代品并完成所有工作。添加主模板的 ng-app，以便从它创建的所有页面都可以访问 ng-app，我们可以在其中添加角度代码任何组件。
您的页面是否可以由管理员创作（例如拖放任何组件）？
整个中心部分是单个组件，它基于 Json 从后端服务加载自身

标签： javascript angularjs adobe aem

【解决方案1】：

我目前正在成功地将 Angular JS 与 AEM 一起使用。

哪个是最外部的应用程序（使用 ng-app 初始化）以及我们如何加载它，因为 AEM 组件是分离的，我无法在其中任何一个中加载最外部的应用程序。

ans：您可以为此创建一个渲染器组件并将其作为外部应用程序，然后将所需的客户端库添加到其中。之后，您可以将渲染器范围用作普通的 Angular 应用程序。

IMO，大多数外部 ng-app 将被加载到模板中（这是所有组件都需要的，但这只是理论上的（我不确定），我没有看到任何示例向我展示如何在创建模板时加载 JS、CSS 文件（不是组件创建，只是为了清楚）

ans：而不是将其加载到模板中将其作为客户端库添加到组件中非常容易，因为像 AEM 中的 js / css 之类的所有内容我们都可以将其添加为客户端库

另一种方法，每个 AEM 组件将是一个单独的 Angular 模块，它会手动引导（我也不确定，请帮助澄清）

ans：是的，您可以将组件创建为 Angular 应用程序，并且可以单独引导它

【讨论】：

实际上，我当时选择 jQuery 是为了安全起见，下次我将在 AEM（如果有的话）中使用您的解决方案，非常感谢。

【解决方案2】：

我已将 Angular 1.x 与 AEM 6.x 一起使用并创建了 SPA（单页应用程序）。此外，使用 Angular 1.x 创建了 AEM Screens 应用程序。

可能有很多方法可以做到，但我遵循以下方法：-

AEM 页面模板（body 标签），带有 ng-app 并为站点添加了角度依赖项（clientlib angular 1.x）

在您的站点 clientlib(JS) 中定义 Angular 模块，例如 module.js， example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);

您还可以为不同的路径定义状态提供程序app.config(function ($stateProvider, $urlRouterProvider) {});

在特定的 clientlib(js) 文件中定义每个组件特定的模块/控制器。 example (html): <div ng-controller="LoginCtrl" /> example (client lib(js)) - app.controller('LoginCtrl', function ($scope) {});

【讨论】：