Possible to use FLASK inside AngularJS ng-app ?

Question

I have a project that was developed with FLASK,Jinja2 templates. It is a simple webapp that allows user to login and see their online profile
- Currently I am trying to improve the project by adding in AngularJS&BootStrap for client-side, because I want to use ngMessages and some other angular dependencies
- The flask_wtf form submit button will work outside < html ng-app> tag but it doesn't work when I put the flask_wtf form inside < html ng-app> tag
- Update: Hello davidism, how is this a duplicate question when my issue is not related. Please note that I am not asking about how to fix the delimiter notation, not asking about how to use angularJS {{var}} inside Jinja2. I am trying to know if I could use flask_wtf inside the AngularJS < html ng-app> tag. As i tried to put the flask_Wtf form inside < html ng-app> tag and it doesnt work, it works outside the tag though.

form.py

class LoginForm(Form):
   """
   For user to login.
   """
   username = StringField(u'User Name:',validators=[
         InputRequired(),
         Regexp(ConfigRegex.RE_LOGIN_ID, message=ConfigRegex.RE_DESC_LOGIN_ID)])

   passwd = PasswordField(u'Password:', validators=[
         InputRequired(),
         Regexp(ConfigRegex.RE_PASSWD, message=ConfigRegex.RE_DESC_PASSWD)])

   submit = SubmitField(u'Log sIn')

login.html with flask_wtf (submit button is working)

<form method="POST">
  {{ form.hidden_tag() }}{# Render any hidden fields, including the CSRF #}

  <div class="field">{{ form.username.label }} {{ form.username }}</div>
  {{ macros.show_field_errors(form.username.errors) }}

  <div class="field">{{ form.passwd.label }} {{ form.passwd }}</div>
  {{ macros.show_field_errors(form.passwd.errors) }}

  <div class="field">{{ form.submit }}</div>
</form>

login.html with flask_wtf inside AngularJS < html ng-app> tag (submit button not working)

<html ng-app="loginApp">
////////////////////////////////////////////////////
//test form with flask (inside ng-app not working)
////////////////////////////////////////////////////
<form method="POST">
  {{ form.hidden_tag() }}{# Render any hidden fields, including the CSRF #}

  <div class="field">{{ form.username.label }} {{ form.username }}</div>
  {{ macros.show_field_errors(form.username.errors) }}

  <div class="field">{{ form.passwd.label }} {{ form.passwd }}</div>
  {{ macros.show_field_errors(form.passwd.errors) }}

  <div class="field">{{ form.submit }}</div>
</form> 

///////////////// END //////////////////


<form name="editForm" method="post" id="login" class="form-signin" novalidate>
.....
.....
           <span ng-class="{ 'has-error': editForm.password.$touched && editForm.password.$invalid }">
            <div class="form-group input-group">
              <input class="form-control" placeholder="Password" name="password" type="password" name='password' ng-model="password" g-maxlength="20" required>
            </div>
            <div class="help-block" ng-messages="editForm.password.$error" ng-if="editForm.password.$touched">
             <p ng-message="required">Password is required</p>
             <p ng-message="maxlength">Password is too long</p>
           </div>
         </span>


         <button class="btn btn-lg btn-danger btn-block" type="submit" ng-disabled="!editForm.$valid">Login</button>

       </form>
</html>

I guess you can't if you are using jinja template.if you only use flask to provide web service such like rest api. then it's no longer a problem angular related . — , Oct 09 '16 at 09:38
Thanks for your reply. I am using flask to create the login form with flask_wtf. As for angularJS, I am using it to validate the credential, e.g. check for min.password length etc with ng-message before sending it to flask to check with the database. Now I am stuck with this part, I could not make the login form work inside angularJS tag. — Zainu, Oct 10 '16 at 02:24

score 0 · Answer 1 · answered Oct 09 '16 at 09:37

0

How to use AngularJS inside Flask [Jinja2]?

Using AngularJS to render the same portions of a page inside Jinja2 isn't going to work well by default, because they both use the tokens {{ and }} to interpolate the variables in the templates. So your angular {{varX}} expressions will be rendered by Jinja2 server first.

Consider using {% raw %} in Jinja2, as it makes it skip the interpolation:

{% raw %}
    {{you can use your ng vars here}}
    {{varX}}             <--- Jinja2 won't interpolate this
{% endraw %}

Or you can change the tokens for AngularJS to something else, e.g. {$ and $}:

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

and:

{$varX$} <--- Jinja2 won't interpolate,
              because Jinja2 looks for `{{` and `}}` by default.

answered Oct 09 '16 at 09:37

bakkal

54,350
12
131
107

and it feels so wired..in my view..I guess angular is tailored for rest design website instead of using it with jinja.. – Oct 09 '16 at 09:42
Yes, or more generally, it's better to make it into an SPA, a Single Page Application, that communicates with the server through an API, e.g. a RESTful API. – bakkal Oct 09 '16 at 09:43
1

Thanks for your reply. With the angular $interpolateProvider changed, does it means that my flask_wtf form will work properly inside the html tag ? – Zainu Oct 10 '16 at 02:06

Possible to use FLASK inside AngularJS ng-app ?

1 Answers1