learning how to use angular and python on atom text editor
this is my angular code in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{myData}}
<!-- <ul>
<li ng-repeat="x in myData">
{{x.name}},{{x.age}}
</li>
</ul> -->
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get('test.py').then(function(response) {
$scope.myData = response.data;
});
});
</script>
and the python code is as below in test.py:
import json
message = "Hello World"
#test = [{'name':'sample1','age':'24'},{'name':'sample2','age':'25'}]
print json.dumps(message)
the commented code is what i really want to do, but i am not able to get the simple code work either.
when i run the code on live server, this is the output i see on the page http://127.0.0.1:3000/index.html:
import json message = "Hello World" #test = [{'name':'sample1','age':'24'},{'name':'sample2','age':'25'}] print json.dumps(message)
Related
I am using VS code in a Windows 10 environment to debug a python flask\jinja application.
Python code pass data to html page without issue and {{ formDict }} displays data correctly. Debugging shows there are data passed to javascript. However, running to this line
var dict = json.stringfy('{{ formDict|tojson|safe }}');
generates this error
toJson is not defined
Is this VS code issue that not load jinja or some other problem? Any recommendation how to resolve it?
Python code:
formDict = {"firstname": "Eric", "lastname": "Smith"}
return render_template("appointment.html",formDict=formDict)
html file - appintment.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function createPointOption () {
var dict = json.stringfy('{{ formDict|tojson|safe }}');
......
}
</script>
</head>
<body onload="creatPointOption()">
....
<p id="test">{{formDict}}</p>
</body>
</html>
Are you sure your error is tojson is not defined. When I ran your code, I got json is not defined.
Try:
var dict = JSON.stringify('{{ formDict|tojson|safe }}');
Note capatilisation of JSON
I have a simple "hello world" VueJS app I'm trying to get working:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
Message: {{ message }}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello, world"
}
});
</script>
</body>
</html>
When I load this file in the browser, off my local disk (ie: file:///home/user/vue-project/index.html), it loads and "Hello, world" is displayed.
However, if I try to take the same file and serve it through the python flask development server, or through gunicorn, {{message}} renders blank.
Does anyone know what might be causing that to happen?
flask renders its variables with jinja2 which uses {{ variable }} as its parsing delimiter
render("mytemplate.html",message="Hello") would replace all {{ message }} blocks with "Hello" before any javascript is handled ... since you dont define message it is simply an empty string... you will need to configure vue to use alternative delimiters (I use [[ message ]])
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
Message: [[ message ]]
</div>
<script>
var vm = new Vue({
el: "#app",
delimiters : ['[[', ']]'],
data: {
message: "Hello, world"
}
});
</script>
</body>
</html>
I have this html file, downloaded from Projekktor:
<!DOCTYPE HTML>
<html>
<head>
<title>Projekktor Version 8 Test</title>
<link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="projekktor/jquery.min.js"></script> <!-- Load jquery -->
<script type="text/javascript" src="projekktor/projekktor.min.js"></script> <!-- load projekktor -->
</head>
<body>
<video id="player_a" class="projekktor" poster="intro.png" title="this is projekktor" width="640" height="360" controls>
<source src="" />
</video>
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a', {
volume: 0.8,
playerFlashMP4: 'http://www.localhost:8000/StrobeMediaPlayback.swf',
playerFlashMP3: 'http://www.localhost:8000/StrobeMediaPlayback.swf'
});
});
</script>
</body>
</html>
Then I am obtaining the url for an youtube video via an API call (I have credentials), in order to replace src=''with the result form the following code
import lxml.html as LH
link = youtube_call(id)
def parse_html(link):
filename = 'projekktor.html'
f = LH.parse(filename)
for el in f.iter('video'):
el.attrib['src'] = link
# have also tried
# el.attrib['src'] = link.replace('amp;', '')
new_html = LH.tostring(f, pretty_print=True)
print (new_html)
but when I print it, a nasty amp; is added to src=, and access to link is denied. ( I broke the link here into newlines for readability purposes)
https://r3---sn-oxunxg8pjvn-bpbs.googlevideo.com/videoplayback?expire=1485418386&
amp;mv=m&
amp;mt=1485396620&
amp;ms=au&
amp;clen=13475559&
amp;mn=sn-oxunxg8pjvn-bpbs&
amp;mm=31&
amp;ipbits=0&
amp;requiressl=yes&
amp;itag=18&id=o-AG-dux-Jvtia_DsWZcyRfNpbMlzulsNn6I3SXyi0SI1B&
amp;lmt=1458188966300704&
amp;signature=BDC946187F74386CE00C5452CD703F9B13E4E30F.766549AB6A7C1811899CCC04742353B5BD0153D7&dur=266.448&key=yt6&
amp;ip=177.142.138.140&
amp;sparams=clen%2Cdur%2Cei%2Cgir%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cupn%2Cexpire&
amp;ei=MluJWO_aEIr_-AXHx6GwDA&
amp;mime=video%2Fmp4&
amp;upn=aFGwEwwIS1o&pl=20&source=youtube&
amp;ratebypass=yes&initcwndbps=1178750&
amp;gir=yes
Remove all amp; and the link is valid, but I've tried link.replace('amp;', '') does not work.
Is there any workaround this?
This is my first crack at Angular. I'm posting JSON data to an html page using Angular.js. I know I'm missing something but can't seem to get it working. Below is the html. I have a python script posting to the same URL below.
<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>File Analysis</title>
<script src="js/angular.js"></script>
<script>
var myApp = angular.module('fileAnalysis', []);
myapp.controller('PostsCtrlAjax', function($scope, $http)
{
$http({method: 'POST', url: 'http://test.com'}).success(function(data)
{$scope.posts = data;}) // response data
});
</script>
</head>
<body>
<h1>You should begin to see new files being analyzed!</h1>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<td>
{{post.filename}}
</td>
</div>
</body>
</html>
I am using Jinja2 with python 3.3.1 and my templatecode is the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{{ title }}</title>
<meta name="description" content="{{ description }}" />
</head>
<body>
<div id="content">
<p>Why, hello there!</p>
</div>
</body>
</html>
and my python.cgi file is the following :
from jinja2 import Template
print("Content-type: text/html\n\n")
templateLoader = jinja2.FileSystemLoader( searchpath="\\")
templateEnv = jinja2.Environment( loader=templateLoader )
TEMPLATE_FILE = "cgi-bin/example1.jinja"
template = templateEnv.get_template( TEMPLATE_FILE )
templateVars = { "title" : "Test Example",
"description" : "A simple inquiry of function." }
outputText = template.render( templateVars )
And all I am getting is a blank page with no html, the cgi-header is working meaning the browser is recognizing that its html but 'Why, hello there' is not being displayed. jinja2 is working too since in interpreter mode I created a simple template like :
t = Template("hello! {{title}}")
t.render(title="myname")
and it displayed hello! myname
Nothing wrong in the error_log either. Whats going on?
The Python interpreter auto-echoes the result of any expression as long as it is not returning None.
In a CGI script you need to explicitly write the result out:
outputText = template.render( templateVars )
print(outputText)
template.render() only produces the string result, it doesn't write this to stdout for you.