GAE and Angular: How to update data of a HTML JINJA template

Question

I have a problem with GAE and Angular about updating data dynamically on an HTML template. What I want is when a new user is inserted into the system it must automatically be shown on the page which lists all the user of the system. I don't know how to that. I read about Angular and it seems a good framework to update data dynamically on an HTML web page. I get the page using JINJA and filling the template by querying the NDB datastore where all the Users are stored. That's the code of the webapp handler which "handles the page":

class TestA(BaseHandler):   
   def get(self):   
    template = JINJA_ENVIRONMENT.get_template('templates/Ang2.html')
    Users=datastore._retrieve_all_user()
    w = self.response.write   
    w(template.render({'Users': Users}))

When I insert a new user the page with all the Users is shown, meanwhile in another tab the updates aren't shown, but if I refresh the page manually the new user is shown.

So, what I want is obtaining the same result but in automatic way. The point is I want to refresh periodically the HTML page, in order to show the eventual new users.

So I focused on Angular, and particularly on $interval and $route.reload(), but I have tried to make something which works, but i haven't got anything.

That's the code of the template:

<!doctype html>
<html ng-app="demoApp">
<head>
    <title>Hello from a template page!</title>
    <link rel="stylesheet" type="text/css" href="/css/helloworld.css">
</head>
<body>
    <h1>Hello world HTML template.</h1>
    <div data-ng-controller="MyController"> 
    <h3>Elenco utenti:</h3>
    <ul>
    {% for User in Users %}
<li><b>{{User.username}}</b>: {{User.email}} </li>
{% endfor %}
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>    
<script>
var demoApp = angular.module("demoApp", []);
myapp.controller("MyController", function($scope, $interval){

$interval(callAtInterval, 5000);


});

function callAtInterval($route) {
$route.reload();

}
</script>   

</body>

Any tips how to do that? PS: I know the solution isn't elegant, but I chose this solution because I need to know how to do that because it will be useful for next steps of the developing of features of my webapp

http://stackoverflow.com/questions/30362950/is-it-possible-to-use-angular-with-the-jinja2-template-engine — Raghvendra Kumar, May 19 '17 at 01:35

score 0 · Answer 1 · answered Jun 14 '17 at 03:40

Don't refresh the page to update data. Angular was meant to update data without refresh.

Create an API as interface for Datastore operations. Use Angular to execute Promise requests on this API, changing the scope depending on the promise return.

Read the documentation on how angular works first, then learn how to create APIs.

Angular https://docs.angularjs.org/guide/concepts

API assuming you are using Python https://www.codementor.io/sagaragarwal94/building-a-basic-restful-api-in-python-58k02xsiq

GAE and Angular: How to update data of a HTML JINJA template

1 Answers1