Basic information
Go version: go1.4.2 darwin/amd64
Operating System: Mac OS X 10.10.5
I'm working on a small Web project written based on go and gin. Here is my golang code. After running go run test.go we have a web server, which is listening on 8089.
Golang test.go
package main
import "github.com/gin-gonic/gin"
import "net/http"
func main() {
router := gin.Default()
router.LoadHTMLGlob("templates/*")
router.GET("/index", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.html", gin.H{
"scheme": "http",
"domain": "meican.loc",
})
})
router.Run(":8089") // listen and serve on 0.0.0.0:8089
}
The html code generated in back-end should contain a template used by front-end javascript engine (Let's say Angular.js).
So the template code is in script tag, just like this:
Part of templates/index.html
<script type="text/template" charset="utf-8">
<div data="{{.scheme}}://{{.domain}}/qr"></div>
<div data="{{.scheme}}://{{.domain}}/qr"></div> <!-- problem here -->
</script>
When {{.domain}} is used at the second time, I got different result. I refreshed the browser and checked out the source code. Then I got this:
Browser source code result
<script type="text/template" charset="utf-8">
<div data="http://meican.loc/qr"></div>
<div data="http://"meican.loc"/qr"></div> <!-- problems here -->
</script>
The second div has 2 extra double quotes.
Why this happens? And how to resolve this problem?
This is a bug in Go, and has been slated to be fixed in 1.7 as of March 2016 (Also partially addressed in 1.6)
Related
I have a Play application. The UI of the application is in Angular. I have created a folder ui which is the top level Angular directory.
build.sbt
`ui-dev-build` := {
implicit val UIroot = baseDirectory.value / "ui"
if (runDevBuild != Success) throw new Exception("Oops! UI Build crashed.")
}
def runDevBuild(implicit dir: File): Int = ifUiInstalled(runScript("npm run build"))
package.json
"build": "ng build --output-path ../public/ui",
When the Angular application is build, I transfer the output to the public folder of the Play framework. From there, Play transfers the contacts of the public folder to target folder for deployment. In the index.html (homepage html file), I access angular by including the scripts created in Angular build.
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
This works fine.
I want to use ng-ace2-editor in my application - https://github.com/fxmontigny/ng2-ace-editor. I have added it in package.json - "ng2-ace-editor": "0.3.9" and I can see that ng2-ace-editor directory is present in node_modules.
When I run the application, I get error
GET http://localhost:9000/mode-html.js net::ERR_ABORTED 404 (Not Found)
exports.loadScript # index.js:3802
exports.loadModule # index.js:4174
setMode # index.js:10152
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setMode
I can't understand how to make my application find mode-html.js. The file is present at location "./node_modules/ace-builds/src-min/mode-html.js. I have added this path in "script":[] of package.json but I still get the error.
"scripts":[
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/theme-eclipse.js",
"./node_modules/ace-builds/src-min/mode-html.js"
]
Interestingly, things work if I include ace.js in the homepage file
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> <!-- this makes things work-->
So I know that issue is that my mode-html.js file is not getting served and most likely it is the path resolution issue but I can't figure out what is it.
Further analysis shows that the following code in ace.js causes the error.
exports.loadModule = function(moduleName, onLoad) {
var module, moduleType;
if (Array.isArray(moduleName)) {
moduleType = moduleName[0];
moduleName = moduleName[1];
}
try {
module = require(moduleName);
} catch (e) {}
if (module && !exports.$loading[moduleName])
return onLoad && onLoad(module);
if (!exports.$loading[moduleName])
exports.$loading[moduleName] = [];
exports.$loading[moduleName].push(onLoad);
if (exports.$loading[moduleName].length > 1)
return;
var afterLoad = function() {
require([moduleName], function(module) {
exports._emit("load.module", {name: moduleName, module: module});
var listeners = exports.$loading[moduleName];
exports.$loading[moduleName] = null;
listeners.forEach(function(onLoad) {
onLoad && onLoad(module);
});
});
};
if (!exports.get("packaged"))
return afterLoad();
net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
reportErrorIfPathIsNotConfigured();
};
var reportErrorIfPathIsNotConfigured = function() {
if (
!options.basePath && !options.workerPath
&& !options.modePath && !options.themePath
&& !Object.keys(options.$moduleUrls).length
) {
console.error(
"Unable to infer path to ace from script src,",
"use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes",
"or with webpack use ace/webpack-resolver"
);
reportErrorIfPathIsNotConfigured = function() {};
}
};
Why does explicitly calling <script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> make the code work. Should this script be already available in ui/scripts.js as per Angular packaging method https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/?
I finally was able to make my code work. My setup is different. I build my Angular application and the it is served from my Play server. The angular build is stored in Play's /public/ui folder. The requests should be in format /assets/ui/.. which gets mapped to /public/ui/... due to a rule in Play routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
When I ran the code, I got error.
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1
Earlier, I also got error Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver
It seems ng-ace-editor imports .js scripts (theme, mode, worker) based on the theme and mode of the editor. The theme and mode js files can be included in scripts.js but some worker-.js files can't be (I don't know why, maybe because worker ones are loaded dynamically using importScript.
The scripts section in Angular.json is (this will all get bundled in scripts.js in Angular's final bundle)
"scripts": [
"./node_modules/ace-builds/src/ace.js",
"./node_modules/ace-builds/src/theme-eclipse.js",
"./node_modules/ace-builds/src/theme-monokai.js",
"./node_modules/ace-builds/src/mode-html.js"
]]
To include worker-.js files, I added this rule because it seems angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - How to include assets from node_modules in angular cli project
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/ace-builds/src/",
"output": "/"
}
],
When I executed the code, I found error that http://localhost:9000/worker-javascript.js can't be loaded. I realised that my files are loaded in /assets/ui/ path and not in the server's root directory. So I set the basepath to /assets/ui in the component's .ts file
import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');
In summary
basePath seem to be what is used to load scripts dynamically (eg worker scripts)
modePath and themePath are / as the mode and theme scripts are bundled in scripts.js and are available at root level
need to copy worker-.js files outside node_modules as angular_cli can't copy assets from node_modules
I have been playing around with numerous go server snippets trying to figure out how I can display an image file within a HTML file or go HTTP template along with an html forms section. Basically, the biggest problem if I use a go template I cannot show an image along with html and still keep the project size small. It seems the only way to get the template to work is by organizing the code into a "typical go HTML project" which I am trying to avoid.
Is there any easy way (with only a couple files and not creating a "typical go web project file structure") to display HTML with an image inside a go template? I believe the problem below is basically with http handlers. Either I can have a text handler or image handler but not both? I need both so I can have user control from HTML form which image will be displayed.
If anyone can help I would really appreciate it.
R
Joe
--Revised
Sorry about being unclear. I have limited experience with go templates and I have seen many examples where people use go app project file structures that might include directories such as templates, img, etc. These directories are often 10 or more. Then they talk about using routes within apps and other things that I am timid to get into.
I just view what I want to do as much more simple. I have about 70 images. I just want a way where a user can click an html page that displays an image and just provide a number 1,2,3,4 as feedback depending on what image is being displayed.
I imagined that a single go program (1 file) could receive the number and once received change the img on the html page or allow the user to click a next hyperlink or something to bring up the next image and once it is over the program stops.
package main
import (
"fmt"
"html/template"
"log"
"net/http"
//"strings"
func img(w http.ResponseWriter, r *http.Request) {
//http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.Dir("images/"))))
fmt.Println("method:", r.Method) //get request method
if r.Method == "GET" {
t, _ := template.ParseFiles("image.gtpl")
t.Execute(w, nil)
} else {
r.ParseForm()
// logic part of log in
fmt.Println("previmage:", r.Form["previmage"])
fmt.Println("nextimage:", r.Form["nextimage"])
}
}
func main() {
//http.HandleFunc("/", sayhelloName) // setting router rule
http.HandleFunc("/login", login)
err := http.ListenAndServe(":9090", nil) // setting listening port
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}
<html>
<head>
<title></title>
</head>
<body> //How to Loop Images based on user submit??
<img src="img/question4.png" alt="Cannot load image" style="width: 800px;height: 800px">
<form action="/login" method="post">
Username:<input type="text" name="previmage">
Password:<input type="password" name="nextimage">
<input type="submit" value="Login">
</form>
</body>
</html>
You have your http.Handle call, which registers the handler, inside the handler. That means every time a request comes in, it tries to register the handler again. That's not allowed (hence the error, which says explicitly that you cannot re-register the same route). You should be registering it in the same place you're registering the handler for the template, i.e. in main:
func main() {
http.HandleFunc("/login", login)
// Register handler correctly
// I changed the route to /img/ to match what you're using in your HTML
http.Handle("/img/", http.StripPrefix("/img/", http.FileServer(http.Dir("images/"))))
err := http.ListenAndServe(":9090", nil) // setting listening port
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}
I have been using Traceur to develop some projects in ES6. In my HTML page, I include local Traceur sources:
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
and if I have a module in the HTML afterwards like:
<script type="module" src="foo.js"></script>
Then Traceur loads in that module, compiles it and everything works great.
I now want to programmatically add an ES6 module to the page from within another ES6 module (reasons are somewhat complicated). Here was my first attempt:
var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
console.log('Inside the module now!');
`;
document.body.appendChild(module);
Unfortunately this doesn't work as Traceur does not monitor the page for every script tag added, I guess.
How can I get Traceur to compile and execute the script? I guess I need to invoke something on either 'traceur' or '$traceurRuntime' but I haven't found a good online source of documentation for that.
You can load other modules using ES6 import statements or TraceurLoader API for dynamic dependencies.
Example from Traceur Documentation
function getLoader() {
var LoaderHooks = traceur.runtime.LoaderHooks;
var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
function(mod) {
console.log('DONE');
},
function(error) {
console.error(error);
}
);
Also, System.js loader seems to be supported as well
window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');
Dynamic module loading is a (not-yet-standardized) feature of System:
System.import('./repl-module.js').catch(function(ex) {
console.error('Internal Error ', ex.stack || ex);
});
To make this work you need to npm test then include BrowserSystem
<script src="../bin/BrowserSystem.js"></script>
You might also like to look into https://github.com/systemjs/systemjs as it has great support for browser loading.
BTW the System object may eventually be standardize (perhaps under a different name) in the WHATWG: http://whatwg.github.io/loader/#system-loader-instance
Following is the content of my JSON File -
{
"tags": [
"Red",
"Green",
"Blue",
"Yellow"
]
}
I checked this with jsonlint but still I am getting the following error in firefox.
Timestamp: Wednesday 18 June 2014 10:39:41 IST Error: not well-formed
Source File:
file:///home/trialcode/trialcode/Projects/ang/18-06-2014/ang/content.json
Line: 1, Column: 1 Source Code: {
I am not sure what I am doing wrong if any.
FYI -
OS - Linux Ubuntu 12.04
Firefox - 24.0
EDIT
I am using the content of content.json file in angular controller via $http.get method.
I explored more about this kind of error and found it is related with the Content-Type setting.
Following is the full code -
<!doctype html>
<html lang="en" ng-app="app">
<head>
<title>JSON Read In Angularjs</title>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http){
$scope.data = {};
$http.get('content.json').success(function(data) {
$scope.data = data;
});
});
</script>
</head>
<body ng-controller="myCtrl">
<ul>
<li ng-repeat="em in data.tags">{{em}}</li>
</ul>
</body>
</html>
How do I set the content type if that is a problem. I searched HERE but unable to fix it. Help me Please if any.
After few hours of searching I came across that -
Chrome and other modern browsers have implemented security
restrictions for Cross Origin Requests, which means that you cannot
load anything through file:/// , you need to use http:// protocol at
all times, even locally -due Same Origin policies.
Source -
Cross Origin Script Stackoverflow Answer
Simple Solution For Local Cross Origin Requests
I have
<script type="text/javascript">
function setupComet()
{
dojox.cometd.init("http://comet.domain.tld:8000");
dojox.cometd.subscribe("/my/calendar", cometCallback);
}
dojo.addOnLoad(setupComet);
function cometCallback (msg)
{
alert(msg.data);
}
</script>
Orbited is replying (viewed with firebug):
<html>
<head><title>404 - No Such Resource</title></head>
<body>
<h1>No Such Resource</h1>
<p>No such child resource.</p>
</body>
</html>
What I'm doing wrong?
What I'm trying to achieve:
Browser comes to page and subscribes to (read-only) channel. When browser sends POST data, PHP side will send data to database and then publish 'refresh' to that comet channel. Browser gets this and refreshes page.
/etc/orbited.cfg:
[global]
reactor=epoll
session.ping_interval = 40
session.ping_timeout = 30
user=orbited
[listen]
http://:8000
[static]
[access]
* -> localhost:8000
* -> dev.lan:80
[logging]
debug=STDERR,debug.log
info=STDERR,info.log
access=STDERR,info.log
warn=STDERR,error.log
error=STDERR,error.log
enabled.default=info,access,warn,error,debug
You are trying to use the cometd library with the Orbited server. These two things do not go together -- just use Orbited.js. It should work with all of your other dojo code just fine.