How to use Angular.JS inside Flask with Python Package? (Easy) Part-2
Hello Everyone that loving code,
I going to sharing you how to use Angular.JS inside Flask. the previous lesson shared you the two solutions (raw/endraw and change tokens).
Today, I going to sharing another solution by a package called flask-triangle. we will not change the tokens or we will not add the tags where begin and end of the code. flask-triangle is pretty easy to readable. We add just |angular inside tokens and boom! Angular.JS runs. I definitely recommend this package for integration of Angular.JS and Flask.
Ok. Let's jump in.
Installation
flask-triangle installing is too easy with pip. First of all, you must install flask-triangle.
pip install flask_triangleUsage
app.py
we need to import the flask_triangle package inside our project. and send the app inside the Triangle() class. and finished for app.py
from flask_triangle import Triangle #import flask-triangle
from flask import Flask, render_template
app = Flask(__name__)
Triangle(app) #<---- connection between two
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()index.html
first of all, we should import angular.min.js (if you don't have the Angular.JS.) and then we put ng-model=”yourName” inside the input element and we can use yourName now. put {{yourName|angular}} inside any tag. we will use <h1> in this lesson.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<script src="/static/js/angular.min.js"></script>
<title>Flask-Triangle</title>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName|angular}}!</h1>
</body>
</html>
Keep growing…
