如何在 Magnolia CMS 中使用 AngularJS 2

Question

我想将 AngularJS2 集成到 Magnolia CMS 中（我是 AngularJS 的新手）。我尝试了 quickstart Project localy 它与 npm start 一起正常工作。

我使用 npm tsc 获取 .js 文件以使用 Magnolia 中的文件来测试它是否有效。我得到的所有 node_modules 文件 unpkg.com （我在终端锁定了用于快速启动项目的文件并集成了所有这些文件）。在 ftl 模板中添加 <my-app> 标签，所有脚本都在同一位置（App-js 文件是从 magnolia 本身加载的）。这没有用，所以我不知道我错过了什么。

我也尝试做一些类似于 this 的事情（但使用 @angular 而不是 angular2 beta）。

我不确定是否可以这样做，因为 Quickstart 有效（使用 npm start），但在我的 tomcat 服务器上却无效。我认为问题可能出在 tomcat 服务器上。

我也在没有任何服务器的情况下尝试过，只是剪下了这段代码，结构如下：

test/test.html

test/app/app.component.js & app.module.js & main.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Update these package versions as needed -->
 <script src="https://unpkg.com/zone.js@0.7.6/dist/zone.js"></script>
 <script src="https://unpkg.com/systemjs@0.20.5/dist/system.src.js"></script>
 <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
 <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
 <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
 <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
 <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
 <script src="https://unpkg.com/rxjs/symbol/observable.js"></script>
 <script src="https://unpkg.com/rxjs/Observable.js"></script>
 <script src="https://unpkg.com/rxjs/Subject.js"></script>
 <script src="https://unpkg.com/rxjs/util/root.js"></script>
 <script src="https://unpkg.com/rxjs/util/toSubscriber.js"></script>
 <script src="https://unpkg.com/rxjs/Subscriber.js"></script>
 <script src="https://unpkg.com/rxjs/Subscription.js"></script>
 <script src="https://unpkg.com/rxjs/util/ObjectUnsubscribedError.js"></script>
 <script src="https://unpkg.com/rxjs/SubjectSubscription.js"></script>
 <script src="https://unpkg.com/rxjs/symbol/rxSubscriber.js"></script>
 <script src="https://unpkg.com/rxjs/Observer.js"></script>
 <script src="https://unpkg.com/rxjs/util/isFunction.js"></script>
 <script src="https://unpkg.com/rxjs/util/isArray.js"></script>
 <script src="https://unpkg.com/rxjs/util/isObject.js"></script>
 <script src="https://unpkg.com/rxjs/util/tryCatch.js"></script>
 <script src="https://unpkg.com/rxjs/util/errorObject.js"></script>
 <script src="https://unpkg.com/rxjs/util/UnsubscriptionError.js"></script>
 <script src="app/app.component.js"></script>
 <script src="app/app.module.js"></script>
 <script src="app/main.js"></script>
<script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
<title>Title</title>
</head>
<body>
 <my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

但这也没有用。

我有一个 REST API 来获取公式和其他东西的验证器。但现在我需要为公式建立一个页面。我不知道如何构建此页面。是否可以使用 ftl 在 Magnolia 中执行此操作？这里最好的解决方案是什么

Answer 1

您不会与 magnolia cms 模板集成。如果您使用 Magnolia CMS REST API 并构建一个与之交互的 angular 应用程序，那就更好了。

Answer 2

有了这个 [plunker][1]，我可以在没有 node.js 的情况下获得 AngularJS 运行。在我尝试用 gulp 编译我的 .ts 文件之前。编译有效，但文件格式错误（这里是一个 [example][2] 我发现它与已经编译的 fils 一起工作到 js（这些文件来自我在问题中已经提到的快速启动项目。

 [1]: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview


 [2]: https://plnkr.co/edit/8lOtCy4GPsq9hZH6D38E?p=preview

Answer 3

为什么不将其构建为带有 Magnolia CLI (NPM) 的 Magnolia light 模块，并且运行 gulp 作为构建设置输出的一部分进入 /webresources 文件夹？
这样，您就可以轻松地编译所有内容，让 Magnolia 为您提供 js 文件，可以设置安全性，在运行时间重新加载内容以及 Magnolia 通常为您做的所有其他事情。

有关 CLI, Light Module structure and light development in general 的更多信息。

如何在 Magnolia CMS 中使用 AngularJS 2

How to use AngularJS 2 with Magnolia CMS

maven

angular

tomcat

magnolia