I've set up an angular project using Yeoman, and embedding a google map in a page using ngmap, using a given address to centre it. I'm adding a marker to the map using the google geocode service to get the latitude/longitude for the address, once the map has been initialised.
var vm = this;
vm.address = '1600 Pennsylvania Ave NW, Washington, DC 20500, United States';
NgMap.getMap().then(function() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: vm.address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
vm.markerPosition = '[' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ']';
} else {
console.log("Unable to retrive details for address: " + address);
}
});
});
It's working fine, I've a plunkr running here - https://plnkr.co/Ex91VGqdFmL9FP78uzU0?p=preview - but when I run the build using gulp build I get this error, and the same when I run the unit tests:
'google' is not defined
What do I need to inject, or mock, so that the call to google.maps.Geocoder doesn't fail?
As requested, this is the index.html from the build
<!doctype html>
<html ng-app="myApp">
<head>
<base href="/">
<meta charset="utf-8">
<title translate>title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="images/icon.png">
<link rel="stylesheet" href="styles/vendor-d41d8cd98f.css">
<link rel="stylesheet" href="styles/app-2dd2bcbbbd.css">
<script src="https://maps.google.com/maps/api/js"></script>
</head>
<body>
<main ui-view></main>
</body>
<script src="scripts/vendor-83b6c91f4a.js"></script>
<script src="scripts/app-41321c4301.js"></script>
</html>
Read through some of the examples of ngMap and it turns out the marker directive can take an address as a parameter, which it converts to lat/lon values automatically.
So the solution is to remove all the google.maps.Geocoder and just this in the html.
<marker position="{{myMapCtrl.address}}" title="Marker"></marker>
and to learn to read all the documentation before attempting to use a library
Related
After react is deployed, the home page file becomes a JavaScript file, resulting in page loading failure
What happens when the content of index.html becomes a JavaScript file suffix (the page stays still for a period of time to trigger the route)
The error message is as follows：
<MenuItem
as={Link}
to="/buyertools/order-history"
borderRadius="4px"
height="45px"
textColor="semantics.default"
>
One
Two
Three:
47.d0f21705.chunk.js The information is as follows
<!doctype html>
<html lang="en">
<head>
<script>
window.dataLayer = window.dataLayer || []
</script>
<style>
.async-hide {
opacity: 0!important
}
</style>
<script>
!function(e, n, t, a, c, s, d, i, m) {
n.className += " " + t,
s.start = 1 * new Date,
s.end = d = function() {
n.className = n.className.replace(RegExp(" ?" + t), "")
}
,
(e[a] = e[a] || []).hide = s,
setTimeout((function() {
d(),
s.end = null
}
), 4e3),
s.timeout = 4e3
}(window, document.documentElement, "async-hide", "dataLayer", 0, {
"GTM-KWJFD3C": !0
})
</script>
<meta charset="utf-8"/>
<link rel="canonical" href="https://www.michaels.com" data-react-helmet="true"/>
<meta name="title" content="Michaels Stores – Art Supplies, Crafts & Framing" data-react-helmet="true"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="assetlinks.json file" href="/.well-known/assetlinks.json"/>
<link rel="apple-app-site-association file" href="/.well-known/apple-app-site-association"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="stylesheet" href="https://use.typekit.net/skl5onh.css">
<link rel="stylesheet" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.0/heatmap.min.js" integrity="sha512-FpvmtV53P/z7yzv1TAIVH7PNz94EKXs5aV6ts/Zi+B/VeGU5Xwo6KIbwpTgKc0d4urD/BtkK50IC9785y68/AA==" crossorigin="anonymous"></script>
<script>
</script> <link href="/static/css/main.dcb28ad8.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/43.a7174a23.chunk.js"></script>
<script src="/static/js/main.4cd548f1.chunk.js"></script>
</body>
</html>
Why is it a problem that the information in index.html is loaded into the JS file
If you keep clicking on the page, the page route can jump and render the page information
In case of the above problems, the page can be displayed normally only after the address is refreshed
I don't know why. Please help me
Your web server (nginx, apparently) seems to be misconfigured in a way that it returns the root index.html for any 404-ing URL, including those under /static/.
So what should probably be a 404 instead gets the index.html content (indeed, HTML), and your browser refuses to execute it as JavaScript (which it isn't).
So, firstly - fix the server configuration to return 404s for 404s under /static/. (For deeplinking purposes in a SPA environment, it does make sense to return index content for other URLs.)
(Looking at the fact that the site is also trying to POST to http://undefined/, this probably won't be the only issue you'll need to solve.)
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
I am trying to write a simple angular application that uses angular ui-router to display components in my application.
I can get it to work using templates and controllers, but when I refactor to components they don't render on the screen. I don't get any console errors either.
Here is my app, it is based on the angular sample application Hello Solarsytem
app.js
var myApp = angular.module('materialThings', ['ui.router']);
myApp.config(function ($stateProvider) {
// An array of state definitions
var states = [
{
name: 'about',
url: '/about',
component: 'about'
}
]
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
});
myApp.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="about.js"></script>
</head>
<body ng-app="materialThings">
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
</body>
about.js
angular.module('materialThings').component('about', {
template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})
Refer to this question:
Angular - UI.Router not loading component
If you are using 0.3.x that won't work. Upgrade to 1.0.0 (I think beta is the latest) and try please.
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1
Also refer to my answer for a similar post - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component
try to change your states variable to this:
var states = [
{
name: 'about',
url: '/about',
template: '<about></about>'
}
]
Unfortunately ui-router guide to components doesn't seem explain in this way, I'll keep looking more to tell you why.
I have a Monaca app with ONSEN UI . it is build with angularJS.
I am trying to access the Monaca cloud using angular in my app.
My index.html looks like. I incuded the monaca-cloud-angular.js
as described in document
http://monaca.mobi/en/blog/lets-make-an-angularjs-module-for-monaca-backend/
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<script src="js/monaca-cloud-angular.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<ons-navigator var="QubecNavigator" page="welcome.html">
</ons-navigator>
</body>
</html>
Welcome page has a welcomecontroller. and in angular i defined like this.
(function() {
var app = angular.module('myApp', ['onsen','angularRandomString','monaca.cloud']);
app.controller('welcomeController',function($scope,$http,$httpParamSerializerJQLike,MonacaBackend){
ons.ready(function() {
// Add another Onsen UI element
console.log('I am here in Welcome');
MonacaBackend.User.register('12345678','admin').then(
function(result){
console.log(result);
$scope.result = result;
},
function(error){
console.log(error);
}
);
});
});
};
I am not able to get any response from Monaca backend and user records are not registering in it.
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.