1

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

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

4

1 回答 1

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 - 将所有内容路由给一个演示者

于 2017-01-22T15:19:02.467 回答