Can AngularJS ng-include load a Jinja2 processed html on FLASK?

Question

I'm quite new to AngularJS but I got amazed with the responsiveness ng-include gives to static web pages. Btw, I am already using a different interpolation signal to make sure jinja2 and angular do not get confused with each other. I was just wondering if there is a way i could implement this on my not static Flask backend.

I can

<div ng-include="'../static/register.html'"></div>

but it render the raw html file without going through my flask route + o consequently through the jinja2 processing. When I do

<div ng-include="'/auth/register'"></div>

which would hit my register route

@auth.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(email=form.email.data,
                    username=form.username.data,
                    password=form.password.data)
        db.session.add(user)
        db.session.commit()
        token = user.generate_confirmation_token()
        # import pdb
        # pdb.set_trace()
        tasks.send_email.delay(user.email, 'Confirm Your Account',
                   'email/confirm', user=user, token=token)
        flash('A confirmation email has been sent to whoever email you are trying to register.'
              'Sorry I had to log you out!')
        return logout()
    return render_template('register.html', form=form)

I get:

Synchronous XMLHttpRequest on the main thread is deprecated because of

its detrimental effects to the end user's experience. For more help, check 

http://xhr.spec.whatwg.org/.

Is there a way?

No. Just jinja blocks and htmls tags. I'm trying to append a registration form on the login page. — CESCO
– CESCO, Commented May 19, 2015 at 19:16
The problem was that register.html was extending the base.html which was also the extension of the html the ng-include tag was inside. — CESCO
– CESCO, Commented May 19, 2015 at 19:33
Right, so there were scripts in the response from /auth/register. I'll add it as an answer for future reference — nathancahill
– nathancahill, Commented May 19, 2015 at 19:34

nathancahill · Accepted Answer · 2015-05-19 19:37:33Z

4

ng-include starts an XHR request to the URL. If the URL responds with <script> tags, it tries to process the request synchronously.

The solution is to make sure you're only returning raw HTML. Be careful with Jinja templates, because they can extend other templates that have script tags.

answered May 19, 2015 at 19:37

nathancahill

10.9k11 gold badges56 silver badges93 bronze badges

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

2 Comments

CESCO Over a year ago

It was also crashing my nginx server! Thanks

CESCO Over a year ago

I have found a way out of the bigger problem.

Collectives™ on Stack Overflow

Can AngularJS ng-include load a Jinja2 processed html on FLASK?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related