I'm trying to understand the "elm-make" command. I built 2 .elm files call Foo.elm and Bar.elm. I'd like to display them in a HTML file of this format :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="elm.js"></script>
</head>
<body>
<h2>Foo</h2>
<div id="foo-app"></div>
<h2>Bar</h2>
<div id="bar-app"></div>
</body>
<script type="text/javascript">
Elm.embed(Elm.Foo, document.getElementById("foo-app"));
Elm.embed(Elm.Bar, document.getElementById("bar-app"));
</script>
</html>
But Elm.Foo and Elm.Bar do not exist. Only Elm.Main.
Tried to compile with this command: elm make Foo.elm Bar.elm --output elm.js. What am I doing wrong ?
It's because I did not have the module declared at the top of my files, so it implied Main :
module Foo where
Related
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
The first hello dojo tutorial which is provided at the main site https://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html did not work for me.
I copy pasted the code, but the 'Hello' remains as is. The em tag does not get added. Any help!
I downloaded the dojo.js and put the file in the same place where the hellodojo.html is. And then I changed the code of hellodojo.html as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="./dojo.js" data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function(dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!!~!!</em>', greetingNode);
});
</script>
</body>
</html>
Here you will see I changed the statement
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
to
<script src="./dojo.js" data-dojo-config="async: true"></script>
And then it worked as expected, since the dojo.js is now available.
I could see 'dojo.js' in chrome extension in source too.
Complete script:
<!doctype html>
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
The location dojo1.7/dojo/dojo.js is correct(checked on firebug). The error now I am getting is
ReferenceError: dojo is not defined
console.log(dojo)
So what do I missed here?
Use a doctype.
Scripts are loaded and executed in the order they are defined in HTML, so scripts that define objects need to be placed before the script that uses the object.
A global dojo object is never defined when you are running in async mode. You need to use the global require function to explicitly load dependencies:
require([ 'dojo/dom', 'dojo/on' ], function (dom, on) {
// code here
});
Try to put the console.log(dojo); script block below the actual script. Now you're actually looking for dojo at the moment it isn't there yet.
<html>
<head>
<script src="dojo1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
console.log(dojo);
</script>
</head>
<body>
</body>
</html>
If I load Dojo from the CDN, everything works perfectly fine. If I load it locally, the mixin doesn't work, and I get the following error in the console:
07-01 02:47:22.428: E/Web Console(7881): Error: declare: mixin #1 is not a callable constructor. at file:///android_asset/www/libs/dojo/dojo/dojo.js:15
Here is an example. This works fine:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="parseOnLoad:true, mblForceBookmarkable:true"></script>
<script type="text/javascript">
require([ "dojox/mobile/parser", "dojox/mobile", "dojox/mobile/View", "dojox/mobile/Heading", "dojox/mobile/RoundRectList", "dojox/mobile/ScrollableView", "dojox/mobile/ContentPane", "dojox/mobile/TextBox", "dojox/mobile/EdgeToEdgeList", "dojox/mobile/FilteredListMixin"]);
</script>
<link href="libs/dojo/dojox/mobile/themes/iphone/iphone.css" media="screen"
rel="stylesheet" title="no title" type="text/css">
<link href="libs/dojo/dojox/mobile/themes/iphone/Accordion.css" media="screen"
rel="stylesheet" title="no title" type="text/css">
</head>
<body>
<div id="search" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top'">Filtered RoundRectList</h1>
<ul id="list" data-dojo-type="dojox/mobile/RoundRectList"
data-dojo-mixins="dojox/mobile/FilteredListMixin"
data-dojo-props="placeHolder: 'Search'">
<li data-dojo-props='moveTo:"1.information", transition:"slide"'
data-dojo-type="dojox/mobile/ListItem">Information</li>
<li data-dojo-props='moveTo:"1.urgency", transition:"slide"'
data-dojo-type="dojox/mobile/ListItem">Urgency</li>
<li data-dojo-props='moveTo:"1.data", transition:"slide"'
data-dojo-type="dojox/mobile/ListItem">Data</li>
</ul>
</div>
</body>
</html>
But if I change the script src from the CDN reference, and use this:
<script src="libs/dojo/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad:true, mblForceBookmarkable: true"></script>
Then it doesn't work anymore. I am using the standard dojo-release-1.9.1. My libs folder contains the following files:
"dojo/dojo/dojo.js"
"dojo/dojox/mobile.js"
"dojo/dojox/mobile" (entire folder including all subfolders)
Any help would be greatly appreciated.
--Josh
Your lib directory is missing the dijit/ folder.
Indeed, dojox/mobile has some dependencies on several dijit modules (for ex, FilterListMixin requires 'dijit/registry'), and, according to what you describe, these modules are not available in your libs folder.
Copy the dijit/ folder into your root dojo/ directory and hopefully it should work the same.
I need to change the dojo namespace to something else. I found this stackoverflow post, but it refers to a dojo documentation page that no longer exists. Below is something I tried based on this page, but didn't work:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="scopeMap: [[ 'dojo', 'newns' ]]"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>
Help!
I just pulled the document out of the old Dojo book and put it in the new doc system:
http://docs.dojocampus.org/multiversion/index
For your specific example, the djConfig object needs to be declared in a script tag before the Dojo file loads, and it is recommended that you map dijit and dojox too:
<html>
<head>
<script>
var djConfig = {
scopeMap: [
['dojo', 'newns'],
['dijit', 'newnsw'],
['dojox', 'newnsx']
]
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"></script>
<script>
newns.addOnLoad(function(){
console.debug("hello world");
});
</script>
</head>
<body>
</body>
</html>