如何在金字塔网络视图中创建/设置 angular 2 应用程序

Cob*_*131 3 configuration pyramid angular

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

我的金字塔 Web 框架已全部设置完毕,我一直在使用 angularjs 来创建我的网页,现在我想改用 angular 2。

我将不胜感激任何形式的指导:)

Mic*_*kel 5

简短回答:只需为您关心的 url 提供一些 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
Run Code Online (Sandbox Code Playgroud)

假设您app.js有一些东西可以将您的应用程序引导到 DOM。

var appElement = document.getElementById('app')
// render angular app on appElement
Run Code Online (Sandbox Code Playgroud)

然后,您将在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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

这是准系统的解释,希望您可以从中了解各个部分如何组合在一起以构建应用程序。