Question

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

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

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

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

我也尝试过没有任何服务器，只是这个代码被剪断了，其结构如下：

测试/的test.html

test / app / app.component.js＆amp; app.module.js＆amp; 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来获取一个formator和其他东西的Validator。但现在我需要为公式建立一个页面。我不知道如何构建这个页面。有可能用ftl在Magnolia里面做吗？什么是最好的解决方案

Answer 1

您不会与玉兰cms模板集成。如果您使用Magnolia CMS REST API并构建一个与之交互的角度应用程序会更好。

Answer 2

为什么不用Magnolia CLI（NPM）将其构建为Magnolia light module并将其作为构建设置输出的一部分运行到/ webresources文件夹中？这样，您可以轻松编译所有内容，并让Magnolia为您提供js文件，可以设置安全性，在运行时重新加载内容以及Magnolia通常为您执行的所有其他操作。

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

Answer 3

有了这个[plunker] [1]，我能够在没有node.js的情况下运行AngularJS。在我尝试使用gulp编译我的.ts文件之前。编译工作，但编码错误的文件（这里[示例] [2]我发现已经编译的fils与js一起使用（文件来自我在问题中已经提到的快速入门项目。

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


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

如何将AngularJS 2与Magnolia CMS一起使用

3 个答案: