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.
Related
I'm making a tutorial mixing AngularJS and Spring Boot that run on a Tomcat server and I'm trying to make a route work but it just doesn't seem to be doing anything. Do you guys see anything wrong here? I've done angular routing before but had no trouble, I think that something is happening due to the fact that it runs in Tomcat...
This is the page that calls the route:
<!DOCTYPE html>
<html ng-app="appCliente">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="./js/app.js"></script>
<script src="./js/controller/cliente-controller.js"></script>
<script src="./js/controller/estado-controller.js"></script>
<script src="./js/controller/cidade-controller.js"></script>
</head>
<body>
Clientes
<div ng-view="ng-view">
</div>
</body>
</html>
And this is the app declaration JS file:
var appCliente = angular.module('appCliente', ['ngRoute']);
appCliente.config(function($routeProvider){
$routeProvider
.when('/clientes', {
controller:'clienteController',
template: '<h2>Something</h2>'
})
.otherwise({
redirectTo:'/'
});
});
Any idea of what seems to be the problem?
(I noticed that when I try to load the initial page - http://localhost:8080/ - Spring Boot is putting some characters after the url automatically - http://localhost:8080/#!/ - but it loads normally)
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
I'm building an angular app, and using a standard index.html file:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
What I'd like to do is have a different index.html or a "home.html" file loaded, if a user is not logged into the app. The home.html will be a single static page marketing site with it's own design and css/js. I'd like that page to be served from the '/' route, and other routes to be handled by the angular app.
How would I dynamically load a different starting html file?
The logic to route to another html should be placed in your login module. It could be not related with Angularjs
There are some code to redirect another page from outside or inside of angular app
$location.url('/RouteTo/index');
$location.url('/index');
$window.location.href="http://www.domain.com/home";
window.location = "http://www.domain.com/home";
you can get your host for app $window.location.host
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
I am currently trying Monaca to develop an hybrid app using the Cordova barcode scanner plugin.
For some reason, scan callback started to behave not properly.
Immediatly after scanning, I get a syncing message dialog ("checking sync target files..."), then a "downloading files" dialog and then, finally, the result dialog I asked for. After closing my result dialog, app goes back to index page, which I do not want.
Here is my code (I use Onsen UI):
js/app.js
var app = angular.module('hello', ['onsen']);
app.controller('testController', ['$scope',function($scope) {
$scope.scan = function() {
window.plugins.barcodeScanner.scan(function(result) {
alert( result.text);
}, function(error) {
alert('scan error');
});
}
}]);
index.html
<!DOCTYPE HTML>
<html ng-app="hello">
<head>
<title>Barcode</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="testController">
<input type="button" ng-click="scan()" value ="Scan !" />
</div>
</body>
</html>
Maybe it is related to the way plugin now has to be called ?
See http://community.phonegap.com/nitobi/topics/_barcodescanner_plugin_upgrading_scanner_javascript_api_code_changes_required :
The BarcodeScanner Plugin on PhoneGap Build will be getting an update today, and apps using it will need to change their code to use cordova.require:
Old:
window.plugins.barcodeScanner.scan(function(){ ... }, function(){ ... }, optionsObj)
New:
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(function (result) {...}, function (error) {...});
Thanks for your help.
For some reason, the culprit was a Monaca debugger parameter :
In Monaca app > Debugger settings > Turn off "Restart after resume"