How to Use Angularjs with the Jinja2 Template Engine

Is it possible to use AngularJS with the Jinja2 template engine?

You have some options.

1) Change the delimiter notation for Angular: 

var app = angular.module('Application', []);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('{a');
  $interpolateProvider.endSymbol('a}');
}]);

Whatever is chosen for the start and end symbols will act as the new delimiters. In this case, you would express a variable to Angular using {a some_variable a}.

This approach has the advantage of only needed to be set once and being explicit.

2) Change the delimiter notation for Jinja2.

Override or subclass Flask.jinja_options.update on the Flask object that you bind to your application (relevant vars: block_start_string, block_end_string, variable_start_string, variable_end_string, comment_start_string, comment_end_string):

jinja_options = app.jinja_options.copy()

jinja_options.update(dict(
    block_start_string='<%',
    block_end_string='%>',
    variable_start_string='%%',
    variable_end_string='%%',
    comment_start_string='<#',
    comment_end_string='#>'
))
app.jinja_options = jinja_options

As there's a higher risk of sensitive data coming un-expanded from from the server-side, I suggest instead changing the syntax on the front-end (i.e. Angular) on any project in which you're not the sole developer.

3) Output a
raw block in Jinja2 using {% raw %} or {% verbatim %}:

<ul>
{% raw %}
  {% for item in seq %}
      <li>{{ some_var }}</li>
  {% endfor %}
{% endraw %}
</ul>

4) Use Jinja2 to write the curly braces in the template:

{{ '{{ some_var }}' }}

this will be output as {{ some_var }} in the HTML.

My preference for approach #1 is apparent, but any of the above will work.

Flask Jinja2 template syntax conflicts with AngularJS (jinja2.exceptions.UndefinedError:)

You error Error: jinja2.exceptions.UndefinedError: 'car' is undefined is not related to JavaScript. The problem seems to be as follows - Jinja2 template renderer also relies on double curly braces same as AngularJS {{ your expression here }}.

There are several solutions that could be used to solve this

  1. You may change the interpolate notation for Angular i.e.

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

    So your javascript/html code should look as follows

    (function () {  'use strict';
      angular.module('WordcountApp', [])
      // Setting up new interpolation delimiter which does not conflict with Jinja2  .config(['$interpolateProvider', function($interpolateProvider) {    $interpolateProvider.startSymbol('[[');    $interpolateProvider.endSymbol(']]');  }])
      .controller('WordcountController', ['$scope',  function($scope) {        $scope.some = 'jjj'            console.log( "in WordcountController " , $scope.some)            $scope.cars = [            {make: 'Mazda', model: 'Miata', year: 2001},            {make: 'Toyota', model: 'Prius', year: 2013},            {make: 'Tesla', model: 'S', year: 2015},            {make: 'BMW', model: '325i', year: 2012}        ]                                           }])
    }());
    <!DOCTYPE html><html ng-app = "WordcountApp" >
        <head>        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>        <script src = "static/main.js" > </script>    </head>
        <body ng-controller = "WordcountController">        <ul ng-repeat = "car in cars" >            <!-- Utilizing new interpolation delimiter -->            <p> [[ car.make ]] </p>        </ul>    </body></html>

    Flask: is it possible to instruct flask to *NOT* process portions of a template?

    You can use the raw block. Anything inside it won't be processed as jinja2 syntax.

    <div>
        {{ flaskReplacesThis }}
    </div>
    <div>
        {% raw %}
        {{ angularReplacesThis }}
        {% endraw %}
    </div>

    Here is the documentation link for it.

    AngularJS with Python flask

    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.

    Can I use Angular.js as templating engine?

    Angular was not designed to do this because it is not a templating engine, it is much more than that.

    There is no build-in way to accomplish this. Your best bet would be strip all ng attributes, angular classes and angular comments and probably some elements too. I personally wouldn't do it.

    I get jinja2.exceptions.UndefinedError when I return a simple HTML page with Angular JS.

    Jinja and Angular both share the use of {{ and }} tags to indicate accessing their variables, so you need to either tell Jinja or Angular to use something else, so they don't collide. Below is how to tell Angular how to use a different tag to indicate a variable call:

    var app = angular.module('myApp', []);

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

    (Taken from Loren Howard's guide)

    Python Flask + Angular Error: 'StoreController Undefined'

    Got it.

    The answer is here:
    AngularJS-Twig conflict with double curly braces

    Modified app.js to

    (function() {
      var app = angular.module('gemStore', []);

     app.config(function($interpolateProvider) {
        $interpolateProvider.startSymbol('{[{');
        $interpolateProvider.endSymbol('}]}');
     }); // NEWLY ADDED

      app.controller('StoreController', function(){
                  this.product = gem;
              }
      );

      var gem =
                  {
                      name: "Chicken",
                      price: 123.11,
                      color: "White"
                  }
      ;

    })();

    Modified index.html to:

    <!DOCTYPE html>
    <html ng-app="gemStore">
      <head>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
        <script type="text/javascript" src="static/app.js"></script>
      </head>

      <body ng-controller="StoreController as store">
            <div class="list-group-item">
                   <h3>{[{store.product.name}]} <em class="pull-right">25</em></h3>
            </div>
      </body>
    </html>

    Related Topics

    Round to 5 (Or Other Number) in Python

    Any Way to Modify Locals Dictionary

    How to Make an Exe File from a Python Program

    Python/Numpy First Occurrence of Subarray

    Python 3: Importerror "No Module Named Setuptools"

    Insert an Element at a Specific Index in a List and Return the Updated List

    Normalize Columns of a Dataframe

    Concatenate a Numpy Array to Another Numpy Array

    How Might I Remove Duplicate Lines from a File

    How to Filter Rows Containing a String Pattern from a Pandas Dataframe

    Python Multithreading Wait Till All Threads Finished

    How to Check Mousebuttonpress Event in Pyqt6

    Numpy "Where" with Multiple Conditions

    Non Blocking Subprocess.Call

    Read File from Line 2 or Skip Header Row

    Pandas - Plotting a Stacked Bar Chart

    Applying Function with Multiple Arguments to Create a New Pandas Column

    How to Print a Generator Expression


Leave a reply



Submit