是否可以集成 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)
我无法将我需要的所有内容都包含在标题中,所以这是我关心的问题:
- 开发 AEM 时必须要有客户端 framework/lib 吗?如果是,什么是最适合 AEM 且易于开发的(Angular.js 正是我认为 "enough" 好且易于集成的方式)。
- 在使用angular.js的情况下,我有一些疑问:
- 哪个应用程序最外层(使用
ng-app
初始化)以及我们如何加载它,因为 AEM 组件是分离的,我无法在其中任何一个中加载最外层。
- IMO,大多数外部
ng-app
将加载到模板中(所有组件都需要它,但这只是理论上的(我不确定)而且我没有看到任何这里的例子告诉我如何在模板创建时加载 JS,CSS 文件(不是组件创建,只是为了清楚)
- 另一种方法,每个 AEM 组件将是一个单独的 angular 模块,它将手动引导(我也不确定,请帮助澄清)
最后但同样重要的是,如果您有使用此堆栈的示例(足够复杂,不像 hello world)或生产项目(完美!),请帮助让我知道,因为我最关心的是 "is it possible to do".
非常感谢!
我目前正在将 angular JS 与 AEM 成功结合使用。
哪个应用程序最外层(使用 ng-app 初始化)以及我们如何加载它,因为 AEM 组件是分离的,我无法在其中任何一个中加载最外层。
ans:您可以为此创建一个渲染器组件并将其作为外部应用程序,然后向其添加所需的 clientlibs。之后,您可以将渲染器范围用作普通 angular 应用程序。
IMO,大多数外部 ng-app 将加载到模板中(所有组件都需要它,但这只是理论上的(我不确定),我没有看到任何示例)告诉我如何在模板创建时加载 JS,CSS 文件(不是组件创建,只是为了清楚)
ans: 而不是将其加载到模板中将它作为客户端库添加到组件中将非常容易,因为 AEM 中的一切都像 js / css我们可以将它添加为客户端库
另一种方法,每个 AEM 组件将是一个单独的 angular 模块,它将 bootstrap 手动执行(我也不确定,请帮助澄清)
ans: 是的,您可以将组件创建为 angular 应用程序,并且您可以 bootstrap 单独
我已将 Angular 1.x 与 AEM 6.x 一起使用并创建了 SPA(单页应用程序)。此外,使用 Angular 1.x 创建了 AEM Screens 应用程序。
可能有很多方法可以做到这一点,但我遵循了以下方法:-
- AEM Page template (body tag) with ng-app and added angular dependency for site (clientlib angular 1.x)
- Define angular module in your site clientlib(JS) say module.js,
example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
- You can also define state provider for different paths
app.config(function ($stateProvider, $urlRouterProvider) {});
- Define each component specific module/controller in a specific clientlib(js) file.
example (html): <div ng-controller="LoginCtrl" />
example (client lib(js)) - app.controller('LoginCtrl',
function ($scope) {});
我无法将我需要的所有内容都包含在标题中,所以这是我关心的问题:
- 开发 AEM 时必须要有客户端 framework/lib 吗?如果是,什么是最适合 AEM 且易于开发的(Angular.js 正是我认为 "enough" 好且易于集成的方式)。
- 在使用angular.js的情况下,我有一些疑问:
- 哪个应用程序最外层(使用
ng-app
初始化)以及我们如何加载它,因为 AEM 组件是分离的,我无法在其中任何一个中加载最外层。 - IMO,大多数外部
ng-app
将加载到模板中(所有组件都需要它,但这只是理论上的(我不确定)而且我没有看到任何这里的例子告诉我如何在模板创建时加载 JS,CSS 文件(不是组件创建,只是为了清楚) - 另一种方法,每个 AEM 组件将是一个单独的 angular 模块,它将手动引导(我也不确定,请帮助澄清)
- 哪个应用程序最外层(使用
最后但同样重要的是,如果您有使用此堆栈的示例(足够复杂,不像 hello world)或生产项目(完美!),请帮助让我知道,因为我最关心的是 "is it possible to do".
非常感谢!
我目前正在将 angular JS 与 AEM 成功结合使用。
哪个应用程序最外层(使用 ng-app 初始化)以及我们如何加载它,因为 AEM 组件是分离的,我无法在其中任何一个中加载最外层。
ans:您可以为此创建一个渲染器组件并将其作为外部应用程序,然后向其添加所需的 clientlibs。之后,您可以将渲染器范围用作普通 angular 应用程序。
IMO,大多数外部 ng-app 将加载到模板中(所有组件都需要它,但这只是理论上的(我不确定),我没有看到任何示例)告诉我如何在模板创建时加载 JS,CSS 文件(不是组件创建,只是为了清楚)
ans: 而不是将其加载到模板中将它作为客户端库添加到组件中将非常容易,因为 AEM 中的一切都像 js / css我们可以将它添加为客户端库
另一种方法,每个 AEM 组件将是一个单独的 angular 模块,它将 bootstrap 手动执行(我也不确定,请帮助澄清)
ans: 是的,您可以将组件创建为 angular 应用程序,并且您可以 bootstrap 单独
我已将 Angular 1.x 与 AEM 6.x 一起使用并创建了 SPA(单页应用程序)。此外,使用 Angular 1.x 创建了 AEM Screens 应用程序。
可能有很多方法可以做到这一点,但我遵循了以下方法:-
- AEM Page template (body tag) with ng-app and added angular dependency for site (clientlib angular 1.x)
- Define angular module in your site clientlib(JS) say module.js,
example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
- You can also define state provider for different paths
app.config(function ($stateProvider, $urlRouterProvider) {});
- Define each component specific module/controller in a specific clientlib(js) file.
example (html): <div ng-controller="LoginCtrl" />
example (client lib(js)) - app.controller('LoginCtrl', function ($scope) {});