Setting up AngularJS with Flask

Question

This should be basic but I can't get angular to play with Flask. Angular and Flask have the same variable interpolation syntax {{ variable }} and according to a blog post, I can use a pipe to distinguish between the two, but the below is causing an error that reads no filter named 'angular'

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
  </head>
  <body>
    <label>{{ yourName | angular }}</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
  </body>
</html>

Can you provide some detail about the problem you're having? — dirn, Oct 17 '14 at 22:30
What blog post told you that? Did it provide the `angular` filter so you could register it yourself? — dirn, Oct 17 '14 at 23:22
@dirn my bad, it wasn't a blog post but a library called Flask Triangle - http://flask-triangle.readthedocs.org/en/latest/installing.html. I didn't realize it was a library that needed to be installed but I've got it working now. — Suraj Kapoor, Oct 17 '14 at 23:32

Bilal · Answer 1 · 2015-02-15T05:29:57.187

5

Because both AngularJS and Jinja template system use "{{}}" symbols, you need to add flask extension to deal with this problem. Use Triangle flask extension.

Inject your instance app to Triangular constructor. Please check code below.

app = Flask(__name__)
Triangle(app)

For more information go here.

edited Feb 15 '15 at 05:29

answered Nov 28 '14 at 19:14

Bilal

109
1
5

2

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – msrd0 Nov 28 '14 at 19:16

score 0 · Answer 2 · answered Oct 18 '14 at 11:49

are you using render_template to send that HTML document? If so, the problem is that you are using Jinja2 and not Angular. Jinja2 does not have a filter called angular. This can be fixed by adding a raw block

<label>{% raw %}{{ yourname | angular }}{% endraw %}</label>

score 0 · Answer 3 · answered Mar 08 '15 at 04:17

One option to is to completely separate the Flask application and the AngularJS application. This way, you won't encounter the interpolation issue and it removes (or at least lessen) the coupling of flask and angularjs in your application. I've written a simple tutorial series on using Flask and AngularJS together. I think it will really help you in using AngularJS and Flask together - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

Setting up AngularJS with Flask

3 Answers3