Nette Framework - 返回一个 Angular 2 应用程序 [关闭]答案

【问题标题】：Nette Framework - Return an Angular 2 app [closed]Nette Framework - 返回一个 Angular 2 应用程序 [关闭]
【发布时间】：2017-01-22 15:19:02
【问题描述】：

我在后端使用 Nette 框架 创建一个应用程序，而对于前端，我想使用一个基于 Angular 2 框架 构建的应用程序。

所以在我的解决方案中，我需要将基于 Angular 2 的应用从后端的 Nette 发送给用户。如何使用 Nette 来提供这个应用程序？

【问题讨论】：

标签： php angular nette

【解决方案1】：

假设在访问您的页面（例如 - myapp.com）后，请求立即发送到 Homepage Presenter。

路由

如果您还没有，请在您的 RouterFactory 中设置此路由（通常在 /app/RouterFactory.php 中）

$router[] = new Route('/', 'Homepage:default');

主页演示者

/app/presenters/HomepagePresenter.php

<?php

namespace App\Presenters;

use Nette;
use Latte\Engine;
use Nette\Bridges\ApplicationLatte\Template;

class HomepagePresenter extends BasePresenter {
    public function renderDefault() {
        $this->setView('angular2App');
    }
}

访问此default() 操作后，我们需要渲染一个模板，其中包含 Angular 2 应用程序。

Angular2 应用程序

使用我们的模板 angular2App.latte，还需要返回 Angular 2 的东西。如果编译得好，通常最多包含 4 个文件。

对于编译使用 Gulp 或 Grunt，它们可以翻译、编译、丑化并最终将所有 Angular 2 文件合并为 3 或 4（就像在生产中一样）

编译 Angular 2 应用程序的最终目录是这样的

/dist
├───src
│   └───app.min.js
├───styles
│   ├───app.css
│   └───vendor.css
└───index.html

这是我们的模板需要返回的内容。把 /dist 文件夹放到 Nette 的 public /www 文件夹中，也可以重命名为 /myapp-frontend

这一切都可以在以后自动化。

模板

/app/presenters/templates/@layout.latte

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <base href="/" />

    <title>myapp.com</title>

    {block styles}{/block}

    <script>window.module = 'aot';</script>
</head>
<body>
    <div class="page">
        <app>For full functionality of this app, please enable Javascript in your browser.</app>
    </div>

    {block scripts}{/block}
</body>
</html>

/app/presenters/templates/Homepage/angular2App.latte

{block styles}
    <link href="/myapp-frontend/styles/vendor.css" rel="stylesheet" />
    <link href="/myapp-frontend/styles/app.css" rel="stylesheet" />
{/block}

{block scripts}
    <script src="/myapp-frontend/src/app.min.js" async defer></script>
{/block}

让 Angular 2 代替 Nette 来做路由

看看这个帖子Nette Framework - Route everything to one presenter

【讨论】：