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

I'm trying to create an angular 2 app withing my pyramid web view, I'v looked online, didn't find any clear tutorials.

I Have my pyramid web framework all setup, i'v been using angularjs to create my web pages, I want to use angular 2 now instead.

I'll be grateful for any kind of guidance :)

Solution

Short answer: just serve up some html for the urls you care about and put your angular app in the static folder. Pyramid doesn't pretend to control your static assets (such as javascript / angular / etc), that's up to you.

Long answer: Let's say you have the following structure where "app.js" is the compiled (or not, it doesn't matter) angular app... assume also your angular dependencies are in there as well so everything is accessible. You need to update this to however you plan to build your javascript, etc.

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

Let's say your app.js then has something to bootstrap your app to the DOM.

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

You've then got your typical single-page app html in a spa.jinja2 template. Notice how it references your js/css from the static folder.

<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>

Now you add a route / view that will just serve up the html.

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

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

This is the barebones explanation from which hopefully you can see how pieces fit together to build an app.