I am supposed to use a map showing all specified locations marked in it. It needs be a general map showing all locations and routes along with the markers. However,
when i used dxMap in my web development project nothing showed up. The screen just remained blank.
below is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
Separate .js file code is as follows:
$(function () {
$('#mapContainer').dxMap({});
});
I have used this approach following the link :
http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
The link shows how to configure a DxVectorMap. But this approach doesn't seem to work for dxMap. Please can anyone guide what approach should i use for dxMap?
The above code created a dxmap once the head tag was changed with correct CDNs (which included support for desktop web applications as well)
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
Related
I am using AngularJS and trying to use the angularJS material datepicker. I have been following the tutorial video at https://egghead.io/lessons/angularjs-angular-material-containers-with-the-layout-api
However, I keep getting this error and dont know why?
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=kg-App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fmodulerr%3Fp0%3DngMaterial%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.9%252F%2524injector%252Fnomod%253Fp0%253DngMaterial%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A332%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A364%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A43%3A99%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A364%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
The error happens when I inject the ngMaterial in my app.js
angular.module('kg-App', ['ui.router','ngMaterial'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
});
I followed the video and have all the scripts that I need
<!DOCTYPE html>
<html ng-app="kg-App">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KG Strength</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">
<link type="text/html" rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" href="./stylesheets/main.css">
<link rel="stylesheet" href="./stylesheets/newform.css">
<link rel="stylesheet" href="./stylesheets/admin.css">
<link rel="stylesheet" href="./stylesheets/nextsession.css">
</head>
<body>
<header-template></header-template>
<image-template></image-template>
<footer-template></footer-template>
<ui-view autoscroll='true'></ui-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/html" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/html" src="node_modules/angular-aria/angular-aria.min.js"></script>
<script type="text/html" src="node_modules/angular-messages/angular-messages.min.js"></script>
<script type="text/html" src="node_modules/angular-material/angular-material.min.js"></script>
<script src="./javascripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Please help
Move the jquery.js script reference before angular.js (important, because angular.js use it internally )
in the App.js, add a dependance to ngMessages !
angular.module('kg-App', ['ui.router','ngMaterial', 'ngMessages'])
Also take a look to enter link description here (the video you looked seem outdated)
I am working on MEAN Stack application. I want to use Bootstrap Material Design CSS styles to my single page application but routing is not working when using mdb.min.css .what is the solution to avoid this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Application</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-view></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript" src="js/routingCtrl.js"></script>
<script type="text/javascript" src="js/loginCtrl.js"></script>
</body>
</html>
if i add mdb.min.css the routing page is not visible in ng-view.but if i remove mdb.min.css the page is visible without styling
Try using the CDN by adding it to the head tags of your root index.html of your angular app like this.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
If it doesn't work please make your issue more elaborate.
The web app works very well. But when I use cordova/ionic to build the mobile apps, a blank page appears.
<!DOCTYPE html>
<html lang="en" >
<head>
<title>app</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
<link rel="stylesheet" href="assets/style/app.css"/>
<link rel="stylesheet" href="assets/style/map.css"/>
<link rel="stylesheet" href="assets/style/dynamic-height.css"/>
<link rel="stylesheet" href="assets/style/search-box.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
<script src="src/ui/fabCtrl.js"></script>
<script src="src/ui/autoComplete.js"></script>
<script src="src/map/map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='bower_components/lodash/dist/lodash.js'></script>
<script src='bower_components/angular-simple-logger/dist/angular-simple-logger.js'></script>
<script src='/bower_components/angular-google-maps/dist/angular-google-maps.js'></script>
<script src="/src/map/dynamic-map-height.js"></script>
<script src="src/map/angular-google-maps_dev_mapped.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script>
<script src="/src/dev_deps.js"></script>
<script src="src/map/search-box-ngmodel.js"></script>
</head>
And the map div has been added in the html body. It is an example of angular-google-maps.
<div data-ng-controller="ctrl" ng-hide="true">
<ui-gmap-google-map id="map"
center="map.center"
pan="map.pan"
zoom="map.zoom"
draggable="true"
refresh="map.refresh"
options="map.options"
events="map.events"
bounds="map.bounds">
<ui-gmap-map-control template="draw.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></ui-gmap-free-draw-polygons>
</ui-gmap-google-map>
</div>
I don't know where is going wrong. All the dependencies are right. And there are no errors in the console of Chrome.
ionic automaticly install content-security-policy plugin. Probably you are not using it. If it is not installed, you can install it https://github.com/apache/cordova-plugin-whitelist
And then try to add this line to index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://*.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com" />
Which allows your application to access google map remote scripts.
Firstly, make sure your js library dependecies are in the right order.
In your case, you are using an angular-google-map example of ploygons generator. Actually this example does not work properly in the cordova project. Try another example, I think you map will display.
I have written the following code in the HTML file.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
</body>
</html>
The binding expressions do not return the value instead they are shown as it is.
When i run this code, i find the error ''Node' is undefined.'
I have used NuGet packages to install the Angular Js and JQuery into the scripts folder.
Make sure that your browser's document mode is greater than IE 8
If it's IE, try this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I used 'sencha generate app' to create my Extjs mvc structure. I can't figure out where to add my custom css so that it is used in the build. In Touch, I would put it in app.json. I've looked in .sencha but can't find any obvious place. I also want it to work with my index.html while testing. Do I just put it in my index.html?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ? -->
<link rel="stylesheet" href="resources/MyApp.css">
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
</html>
Thanks!
In the <HEAD> section is where you will put your CSS Style Sheets and SCRIPT tags in general.
It is recommended to put your <SCRIPT> tags at the bottom of the page (before </body>) because the page don't load the rest of the page until the script have finished loading.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AM</title>
<link rel="stylesheet" href="resources/css/default/app.css">
<!-- Like this ! -->
<link rel="stylesheet" href="resources/MyApp.css">
</head>
<body>
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<script src="app/app.js"></script>
</body>
</html>