[PYTHON] Comment résoudre les conflits de portée variable entre Jinja2 et AngularJS

AngularJS et Jinja2 ont une spécification de syntaxe en HTML qui entoure la portée de la variable entre crochets doubles ondulés {{...}}. Par conséquent, si vous souhaitez écrire AngularJS dans Jinja2 utilisé dans le framework Python, l'écriture de la portée de la variable AngularJS en HTML sera en conflit et la portée de la variable AngularJS sera invalidée.

J'ai trouvé un moyen de changer la portée variable derimita ({{...}}) du côté AngularJS dans l'entrée de naoiwata, mais Jinja2 Je ne savais pas comment changer de côté, alors je l'ai recherché.

... et concluez.

Aux premières préférences (http://jinja.pocoo.org/docs/dev/api/#high-level-api) Il semble que vous devriez changer ** variable_start_string ** et ** variable_end_string **.

J'ai donc écrit un script qui utilise le moteur de template de Jinja2 à partir du framework webapp2 de GAE.

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

Voir ici pour savoir comment utiliser Jinja2 avec 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";
}]);

Si tout se passe bien, vous verrez * hello angularjs * et * hello Jinja2 * sur votre navigateur.

Téléchargez sur GAE et vous pourrez utiliser Angularjs sur appspot.com.