AngularJS with Python flask [duplicate]

Question

I'm using flask to render index page

app = Flask(__name__)
@app.route("/")
def main():
    return render_template('index.html')

I'm sending the results in an ajax call made to an flask REST API. I'm able to build table using Jquery but If I'm using angularjs ng-repeat for a table like below

<table>
    <tr data-ng-repeat="r in regResults">
        <td>{{r.TCID}}>
    </tr>
</table>

I'm getting the below error

[2018-01-30 16:50:32,833] ERROR in app: Exception on / [GET]
UndefinedError: 'r' is undefined

danidee · Accepted Answer · 2018-01-30 14:03:26Z

1

That's because Angular and Jinja2 use {{}} as template tags to print out variables. Jinja2 processes the template before it's rendered by the browser (and eventually picked up by Angular). The simplest solution is to enclose the block in {% raw %} like this:

{% raw %}
<table>
    <tr data-ng-repeat="r in regResults">
        <td>{{r.TCID}}>
    </tr>
</table>
{% endraw %}

This tells jinja2 not to interfere with that section of the template.

If you find yourself with too many {% raw %} tags it might be time to separate your frontend from the backend and communicate over an API.

answered Jan 30, 2018 at 14:03

danidee

9,6342 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krishna Over a year ago

Can you help me on separating frontend & backend

danidee Over a year ago

@Krishna I'm not saying your approach is entirely wrong. This approach is perfect for a small website. To separate the frontend and backend you'll need to build an API in Flask that takes a request and returns JSON (No rendering of templates) and then your Angular app will get its information from there. The UI aspects of your application would be handled entirely by Angular.

Collectives™ on Stack Overflow

AngularJS with Python flask [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related