Nette Framework - Return 一个 Angular 2 应用程序

Question

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

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

Answer 1

让我们假设在访问您的页面后（例如 - myapp.com）请求转到 主页演示者。

路由

如果您还没有，请在您的 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，还需要returnAngular2个东西。一般编译好的最多4个文件。

对于编译使用 Gulp 或 Grunt，它翻译、编译、丑化并最终加入你所有的 Angular 2 个文件分成 3 个或 4 个（就像在生产中一样）

Angular 2 个应用程序编译后的最终目录如下所示

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

这是需要用我们的模板 return 编辑的内容。把/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/首页/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

执行路由

看看这个post

Nette Framework - Return 一个 Angular 2 应用程序

Nette Framework - Return an Angular 2 app

php

nette

angular

路由

首页主持人

Angular2 个应用程序

模板

让 Angular 2 代替 Nette