I'm implementing i18n with flask_babel like below and it works in local server.
However it doesn't work in production after deploy.
It can show translated with "_('English')", however it does show {{ _('English')}} as is in HTML.
Is there any way to show an appropriate message in HTML?
[main.py]
from flask_babel import gettext as _
#app.route('/', methods=['GET'])
def root():
flash(_('English'), 'success')
return render_template('index.html')
[index.html]
<!doctype html>
<html>
<head>
</head>
<body>
{{ _('English')}}
</body>
</html>
Related
My popup index.html looks like this:
<!DOCTYPE html>
<html
<body>
<div id="app"></div>
<script src="https://www.sesamecall.com/build/app218.js"></script>
</body>
</html>
When people open the popup, they have to wait 2-5 seconds for the script to load. (My app.js is fat)
Is there any way we can cache it so the app loads instantly?
Is that even possible?
I started developing a hybrid application. So I have done th folllowing steps:
add Angular 8 dependencies
add polyfills.ts
remove ng-app attribute from my root index.html
do a manual bootstrap of AngularJs app
How looks my Angular init module:
#NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class HubAngularModule {
ngDoBootstrap() {
}
}
platformBrowserDynamic().bootstrapModule(HubAngularModule)
.then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myAngularJsModule']);
});
How looks my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
</body>
</html>
main-header, console-menu - are AngularJS components. Of course that configuration works well when ng-app is presented.
What I expect. Hybrid app starts just like old AngularJS app and I'm able to see login page, start page etc.
What I actually got. AngularJS app is actually bootstrapping. I can see method app.module().run(...) executes. But no component loads so I see only a blank page.
After a several hours of experiments I have found a soultion.
I decided to check whether the manual bootstrap of the AngularJS will work:
angular.element(document)
.ready(() => {
angular.bootstrap(document.body, ['myAngularJsModule']);
});
And it had failed. Even if no Angular 8 present. So the reason it fails to start is a location of <script> tags with my webpack bundles. It located in <head> but should be located in <body> after all the app markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</body>
</html>
It is so dumb, but exactly that dumb thing like this make the biggest headache sometimes. And what disappointed me me the most not a single migration tutorial tells nothing about that detail!
Have you upgraded your angularJS components to make them work in Angular ?
Is there anyway to show skeleton (empty boxes- if I need to load some images and text from background using services) while loading data from api services so that user get a feeling something is happening over instead of showing empty page and dump data once ready.
You can use a simple ng-show, and a loaded variable.
ie
<div ng-show="Controller.loaded"></div>
$scope.loaded = false;
$http.get(...)
.then(...{
$scope.loaded = true;
})
you need ngCloak
there is a plunker however it's too fast to be noticed:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-cloak-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2">{{ 'world' }}</div>
</body>
</html>
try it on your project and see if it helps
I'm trying to follow this [dojo tutorial]1 , a very simple , but it doesn't run
work.
here is the Html code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
dojoConfig = {
parseOnLoad: true,
baseUrl: "http://localhost/arcgis_js_api/library/3.15/",
isDebug: true
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.15/dojo/dojo.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
require(["dijit/form/CheckBox"], function(CheckBoxk) {
var chbox = new CheckBoxk({
id: "chbox1",
checked: true
});
chbox.placeAt("container", "first");
});
</script>
</body>
</html>
and this is Google chrome output:
Unless you are hosting your own custom version of the ArcGIS API for JavaScript on your system (i.e. because you are using localhost), you should instead use ESRI's CDN to load the API resources.
Ex:
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/"></script>
Otherwise it appears you simply have a bad web server configuration on your system, i.e. "arcgis_js_api" doesn't point where you think it points. Check your web server log for more information about the 404.
What i want to do is, just send down the HTML+css+js files as static pages on some routes like:
#app.route('/', methods=[GET])
def index():
return <html+css+js>
Particularly i would like to stay away from templates, and rely on ajax/websocket connecting to other routes of the flask app to get the JSON objects and update the webpage. Also I had a hard time in linking css and js files in html. The url_for method seems to completely rely on template system and doesn't seem to work properly in my case.
eg.
Directory Structure
redirect-server(app home folder)
static
index.html
main.js
venv(python3 virtualenv)
main.py(flask app)
main.py
from flask import Flask, redirect
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return redirect("/abc/xyz")
#app.route('/abc/xyz')
def abc():
return app.send_static_file("index.html")
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
The error I get is the following
127.0.0.1 - - [28/Oct/2015 14:07:02] "GET /abc/%7B%7B%20url_for('static',%20filename='main.js')%20%7D%7D HTTP/1.1" 404 -
The HTML is returned fine but it cannot find the js file
You send the template as a static file.
app.send_static_file("index.html")
Better render it, as shown in the docs :)
there is no way i could find this to work without relying on templates.
The following worked for me
restructuring my directories as follows
redirect-server
static
main.js
templates
index.html
main.py
main.py
from flask import Flask, redirect
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return redirect("/abc/xyz")
#app.route('/abc/xyz')
def abc():
return render_template("index.html")
app.run(debug=True)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>