How to use Angular.JS inside Flask? (Easy) Part-1

Hello Everyone that loving code,

I am going to share how to use AngularJS inside Flask. a lot of people says “There is an Angular 2 and after. it’s not necessary Angular.JS” but unfortunately it is not correct. Angular.JS and Angular 2 and after both are different. also, have different usage area. Sometimes We have to use Angular.JS and Flask etc. for VFX Pipeline and AngularJS resolving resolves much better than Angular 2 and more for some project.

As you know, They use the same tokens;

{{ something }}

We want to use both of them but when we run the project (app.py) Ups! the codes will conflict. So we have several resolving for that.

Actually. We have two option for using Angular.JS in Flask. Flask has a token called raw/endraw token or We can change tokens to another token.

Let’s jump in.

>Solution in Flask

Usage:

{{Flask Tokens}}
{% raw %} 
   {{ANGULARJS_TOKEN}} <!— angularJS codes →
   {{words}}
{% endraw %}
{{Flask Tokens}}

>Solution in AngularJS

Javascript:

var app = angular.module('yourAPP', [])
app.config(function($interpolateProvider)
{
$interpolateProvider.startSymbol('{@'); //Start Token (up to you)
$interpolateProvider.endSymbol('@}');  //End Token (up to you)
});

Usage:

{{Flask Tokens}}
{@ ANGULARJS_TOKEN @} <!— angularJS token →
{@ words @}  <!-- angularJS token
{{Flask Tokens}}

Example Usage in Project:

{% for word in words["failed"]|reverse %}
   <a href="#" data-toggle="modal" ng-click="getModal({{word.id}})"  data-target="#exampleModalCenter" >
   <div class="alert alert-danger failed_{{word.id}}" >
            {{word.id}} : {{word.english}}/{{word.turkish}}  <span class="badge badge-danger text-wrap float-right status">render: {{word.status}}</span>
        </div>
   </a>
{% endfor %}
...
...
...
<h5 class="modal-title" id="exampleModalLongTitle"><b>
{@ word_details.english @} / {@ word_details.turkish @} </b></h5>
...
...
...

if you didn’t like the two solutions. please go ahead to the next lesson

Click another solution with a package. Next Lesson

Keep growing…