How to resolve variable scope conflicts between Jinja2 and AngularJS

AngularJS and Jinja2 have a syntax specification in HTML that encloses the variable scope in double curly braces {{...}}. Therefore, if you want to write AngularJS in Jinja2 used in the Python framework, writing AngularJS variable scope in HTML will conflict and the AngularJS variable scope will be invalidated.

I found a way to change the variable scope delimiter ({{...}}) on the AngularJS side in naoiwata's entry, but Jinja2 I didn't know how to change the side, so I looked it up.

... and conclude.

In the first Preferences It seems that you should change ** variable_start_string ** and ** variable_end_string **.

That's why I wrote a script that uses Jinja2's template engine from GAE's webapp2 framework.

index.py


import os
import webapp2
import jinja2

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__))
	,extensions=['jinja2.ext.autoescape']
	,variable_start_string='[['
	,variable_end_string=']]'
   ,autoescape=True)

class MainPage(webapp2.RequestHandler):

    def get(self):
        template_values = {
            'test': 'hello Jinja2'
        }

        template = JINJA_ENVIRONMENT.get_template('index.html')
        self.response.write(template.render(template_values))
        
app = webapp2.WSGIApplication([('/', MainPage)],
                              debug=True)

index.html


<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="mainCtrl">
      <p>{{test}}</p>
      <p>[[test]]</p>
    </div>
  </body>

</html>

script.js


var myModule = angular.module("MyApp", []);
myModule.controller('mainCtrl',['$scope', function($scope){
  $scope.test = "hello angularjs";
}]);

If all goes well, you will see * hello angularjs * and * hello Jinja2 * in your browser.

Upload to GAE and you will be able to use Angularjs on appspot.com.

Recommended Posts

How to resolve variable scope conflicts between Jinja2 and AngularJS
How to switch between Linux and Mac shells
How to use argparse and the difference between optparse
[Python] How to set variable names dynamically and speed comparison
How to resolve CSRF Protection when using AngularJS with Django
Difference in how to write if statement between ruby ​​and python
How to install and use Tesseract-OCR
How to install and configure blackbird
How to use .bash_profile and .bashrc
How to install CUDA and nvidia-driver
How to install and use Graphviz
How to solve slide puzzles and 15 puzzles
attempted relative import beyond top-level package and how to resolve when angry
How to package and distribute Python scripts
How to split and save a DataFrame
How to install and use pandas_datareader [Python]
python: How to use locals () and globals ()
[Python] How to calculate MAE and RMSE
How to use Python zip and enumerate
How to use is and == in Python
How to use pandas Timestamp and date_range
How to install fabric and basic usage
Resolve Angural JS and Django template conflicts
How to write pydoc and multi-line comments
[Note] What to do if the Qt library conflicts between pyqt and opencv