如何在金字塔网络视图中 create/setup 一个 angular 2 应用程序

Question

我正在尝试使用我的金字塔网络视图创建一个 angular 2 应用程序，我在网上查看过，没有找到任何明确的教程。

我已经设置好了我的金字塔网络框架，我一直在使用 angularjs 来创建我的网页，我现在想改用 angular 2。

如有任何指导，我将不胜感激:)

Answer 1

简短回答：只需为您关心的网址提供一些 html 并将您的 angular 应用程序放在静态文件夹中。 Pyramid 不会假装控制您的静态资产（例如 javascript / angular / 等），这取决于您。

长答案：假设您有以下结构，其中 "app.js" 是已编译的（或未编译，这无关紧要）angular 应用程序...还假设您的 angular 依赖项也在那里，所以一切都可以访问。您需要将其更新为您计划构建 javascript 等

myapp/
  - static/
    - css/
      - main.css
    - js/
      - app.js
    - media/
  - views/
    - default.py
  - templates/
    - spa.jinja2

假设您的 app.js 然后有东西要 bootstrap 您的应用到 DOM。

var appElement = document.getElementById('app')
// render angular app on appElement

然后您就在 spa.jinja2 模板中获得了典型的单页应用程序 html。请注意它如何从静态文件夹中引用您的 js/css。

<html>
    <head>
        <link type="stylesheet" src="{{ request.static_url('myapp:static/css/main.css') }}">
    </head>
    <body>
        <div id="app"></div>
        <script src="{{ request.static_url('myapp:static/js/app.js') }}"></script>
    </body>
</html>

现在您添加一个路由/视图，它将只提供 html。

config.add_route('home', '/')

@view_config(route_name='home', renderer='spa.jinja2')
def home_view(request):
    return {}

这是最基本的解释，希望您能从中了解各个部分如何组合在一起构建应用程序。

如何在金字塔网络视图中 create/setup 一个 angular 2 应用程序

How to create/setup an angular 2 app inside a pyramid web view

configuration

pyramid

angular