[PYTHON] So lösen Sie Konflikte mit variablen Bereichen zwischen Jinja2 und AngularJS

AngularJS und Jinja2 haben eine Syntaxspezifikation in HTML, die den Variablenbereich in doppelte wellenförmige Klammern {{...}} einschließt. Wenn Sie AngularJS in Jinja2 schreiben möchten, das im Python-Framework verwendet wird, kommt es daher zu Konflikten beim Schreiben des AngularJS-Variablenbereichs in HTML, und der AngularJS-Variablenbereich wird ungültig.

Ich habe in naoiwata's entry einen Weg gefunden, die Begrenzung des variablen Gültigkeitsbereichs ({{...}}) auf der AngularJS-Seite zu ändern, aber Jinja2 Ich wusste nicht, wie ich die Seite wechseln sollte, also habe ich nachgeschlagen.

... und schließen.

Bei den ersten Einstellungen (http://jinja.pocoo.org/docs/dev/api/#high-level-api) Es scheint, dass Sie ** variable_start_string ** und ** variable_end_string ** ändern sollten.

Also habe ich ein Skript geschrieben, das die Vorlagen-Engine von Jinja2 aus dem webapp2-Framework von GAE verwendet.

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

Informationen zur Verwendung von Jinja2 mit webapp2 finden Sie unter hier.

`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";
}]);

Wenn alles gut geht, sehen Sie * hallo anglejs * und * hallo Jinja2 * in Ihrem Browser.

Wenn Sie es auf GAE hochladen, können Sie Angularjs auf appspot.com verwenden.