How to set Arcgis Javascript dojoConfig relative path of packages - javascript

I am using Arcgis Javascript API. API is built on dojo toolkit. So I need to use dojo features in API. I am preparing dojo config file as following.
var pathRegex = new RegExp("/\/[^\/]+$/");
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
parseOnLoad: false,
baseUrl:"js/",
packages: [
{
name: "application",
location: locationPath + '/js/application'
}]
};
I created a bootstrapper.js like following.
require(["application/main", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
And index.html file is like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arcgis Javacsript API Samples</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</head>
<body class="claro">
<div id="map"></div>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/djConfig.js"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
</html>
My application is hosted on IIS and has addres like this htp://domain/Demo/Sample1/index.html
when I run application, this code giving error like following.
"NetworkError: 404 Not Found - http://js.arcgis.com/3.6/js/dojo/application/main.js"
If I set bootstrapper.js file as following, problem is solwing.
require(["js/application/main.js", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})

Try to change your script order in index.html file. Your config settings should load before CDN.
<div id="map"></div>
<script src="js/application/djConfig.js"></script>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/bootstrapper.js"></script>
</body>

Related

Webpage is displaying curly braces from expressions using Angular1.4

As I'm new to Angular, I expect to run in to issues however this issue seems to be repeating itself off and on.
As I'm following a tutorial on learning Angular here, I was learning about how to use expressions.
What I'm attempting to do is access an gem's attributes and display them on the webpage. However, the object values are not being accessed and it is just displaying as so:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Add to Cart
Where as I want it to display as:
Dodecahaderon
$2.95
. . .
Add to Cart
I thought it may be due to the videos using Angular1.2 and I'm using 1.4 however I'm not sure. What am I doing wrong and how can I properly display the object attributes?
Here is the code:
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase = true,
soldOut = true
};
})();
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your angular library is not referenced correctly. Open your console window and make sure the angular script reference is actually working.
Currently gem is definied outside the scope of the controller. Also, as gem as an object you must change = to :
You need to change your code to this and it works
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.item = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase : true,
soldOut : true
};
});
})();
And your html to this:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.item.name}}</h1>
<h2>${{store.item.price}}</h2>
<p>{{store.item.description}}</p>
<button ng-show="store.item.canPurchase">Add to Cart</button>
</div>
</body>
</html>
Also, you may need to replace your reference to angular from <script type="text/javascript" src="angular.min.js"></script> to <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌​ript>

Angular 1.4.2 $injector:modulerr Module Error

I tried all the solutions(Stackoverflow,etc..) but none worked for me.
All scripts Were loaded, i using vs 2015, i'm trying to put together a menu.
Mobile angular version 1.2
Angular 1.4.2
i call my function (start in pageteste.js)
Thanks for all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/mobile-angular-ui-base.min.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/mobile-angular-ui.min.js"></script>
<script src="cordova.js" type="text/javascript"></script>
<script src="scripts/pageteste.js"></script>
<script type="text/javascript">
function start() {
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui"
]);
/* angular.module('myApp', [
"ngRoute",
"mobile-angular-ui",
]).config(function ($routeProvider) {
$routeProvider.when('/', {
// ...
});
// ...
});*/
}
</script>
</head>
<body ng-app="AngularUIBucketApp">
// go
</body>
</html>
Like #Tom stated you need to actually call your start() function.
function start() {
var app = angular.module('AngularUIBucketApp', [
"ngRoute",
"ngTouch",
"mobile-angular-ui"
]);
}
start();
Solution: I need install Angular.js on Nuget "right button->Manege NugGet Packages"

Routers apparently doing nothing locally in Backbone.js

I recently was fiddling with Backbone.js and I got everything to work (Models/Views/Events/Collections) except the Router. Here is my js/router/test.js file.
var Router = Backbone.Router.extend({
routes: {
'' : 'index',
'projects/:id' : 'show'
},
start: function() {
Backbone.history.start({ pushState : true });
},
index: function() {
alert('index');
},
show: function(id) {
alert(id);
}
});
var router = new Router();
router.start();
And here is my test.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<title> sup </title>
</head>
<body>
<p> hello </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- jQuery -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"> </script> <!-- underscore.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"> </script> <!-- backbone.js -->
<script src="js/routers/test.js"></script>
</body>
</html>
If I put an alert('Hi!') in initialize: within my Router the alert pop ups correctly. I am navigating to file:///Users/myname/Projects/backbone/test.html as the base page. Should I be setting a urlRoot somewhere? Any help is appreciated.
The problem was that Backbone.js acts differently using file:/// URLs and needs to have a webserver serving the files.
The solution was to move my files into my ~/Sites folder and configure and start Apache. I followed the guide here: http://www.coolestguidesontheplanet.com/downtown/get-apache-mysql-php-and-phpmyadmin-working-osx-109-mavericks.

javascript: Getting "DOM Exception 9" while creating custom event

I'm using PhoneGap to develop an android app. in the index.html I load a js file like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/loading.css" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/cordova-2.5.0.js"></script>
<script type="text/javascript" src="scripts/readImages.js"></script>
<script type="text/javascript">
function onReadImage(event) {
//do something
}
document.addEventListener("onReadImage", onReadImage, false);
</script>
</head>
<body>
<!--
.....
-->
</body>
</html>
readImages.js
// Some codes
window.readImageEvent= document.createEvent("readImageEvent"); // line 4
readImageEvent.initEvent("onWeddingCakesRead", true, true);
//Some functions
readImageEvent.images = data;
document.dispatchEvent(readImageEvent);
but when I check LogCat, I see this error:
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 at file:///android_asset/www/scripts/readImages.js: 4
Any ideas?
finally I found out the problem.
I changed the below code:
window.readImageEvent= document.createEvent("readImageEvent");
to:
window.readImageEvent= document.createEvent("Event");
Because "readImageEvent" is not a proper event type. This link could be so useful
about this issue.
According to developer.mozilla.org
The createEvent method is deprecated.
I guess, you can try something like this:
var readImageEvent = new CustomEvent(
"onReadImage",
{
detail: {
images: data
},
bubbles: true,
cancelable: true
}
);
document.dispatchEvent(readImageEvent);
More information about usage, compatibility, etc can be found HERE

Knockout JS: ko.applyBindings is not a function

I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>

Categories

Resources