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)

See here for how to use Jinja2 with webapp2.

`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.