I create a page using the jinja2 template engine and give it as follows:

from flask import render_template @app.route('/', methods=['GET']) def index(): return render_template('index.html')

angular and my js code is connected as follows:

 <!DOCTYPE html> <html ng-app='drqApp'> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"> </script> <script src="static/js/app.js"></script> ... ... </body>

But the angular application in this case does not work, the page is rendered but angular does not work. If you give index.html as a file, see the code below, then angular works as it should.

 @app.route('/', methods=['GET']) def index(): return send_file('index.html')

What am I doing wrong? Is it possible to connect angular to dynamic pages formed from templates?

  • It doesn't matter what HTML is generated on the server (python, ruby, java, js or php). See what comes to your browser. While there is little data to understand the reason. - Aries Ua

1 answer 1

With a probability of 90% I am sure that the problem is in {{}} used as an angular and jinja2. For example, if you write in the template <input value="{{model_in_scope}}"/> and if there is no model_in_scope in the context (and in the example it is not), then <input value=""/> will arrive to the client and there will be no bayding . This is solved in several ways:

  1. On the forehead: {% raw %} <input value="{{model_in_scope}}"/> {% endraw %} - raw escapes text from compilation with the jinja template engine

  2. Make angular use other characters to express for example {[]}

     var app = angular.module('myApp', []); app.config(['$interpolateProvider', function($interpolateProvider) { $interpolateProvider.startSymbol('{['); $interpolateProvider.endSymbol(']}'); }]);

  3. Make jinja use {{[]}} instead of {{}}

     class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( variable_start_string='{[', variable_end_string='}]', )) app = CustomFlask(__name__)
  • Thank you, you were right. Conflict was in {{}} - biomaks 5:41 pm