CODEWITHSUNDEEP
javascriptpythonangularjsflask
CESCO
CESCO

Reputation: 7768

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

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?

Upvotes: 2

Views: 552

Answers (1)

nathancahill
nathancahill

Reputation: 10850

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.

Upvotes: 4

Related Questions