(EDIT: When you use plain Google Maps API with AngularJS Material the problem is the same.)
When I use at the same time in my AngularJS app:
NgMap (https://github.com/allenhwkim/angularjs-google-maps)
AngularJS Material (https://github.com/angular/material)
Maps don't work properly on mobile (on desktop it is ok) - the problem is with touch gestures. Example:
https://incampo.pl/map2.html - (test on mobile!)
but when I don't use material:
angular.module("incampoApp", ["ngMap"])
instead of:
angular.module("incampoApp", ["ngMap", "ngMaterial"])
it works properly: https://incampo.pl/map.html - (test on mobile!)
My whole example code (JS compiled from typescript):
<!DOCTYPE html>
<html ng-app="incampoApp">
<head>
</head>
<body ng-controller="offerController as vm">
<div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyufiB6xUh1SzM7LK2NniXGDPyY__KtP8&callback=initMap">
<ng-map id="map" min-zoom="2" zoom="6" center="52.2,19"></ng-map>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script>
var IncampoApp;
(function (IncampoApp) {
var OfferController = (function () {
function OfferController(ngMap) {
ngMap.getMap();
}
OfferController.$inject = ["NgMap"];
return OfferController;
}());
IncampoApp.OfferController = OfferController;
})(IncampoApp || (IncampoApp = {}));
</script>
<script>
var IncampoApp;
(function (IncampoApp) {
angular.module("incampoApp", ["ngMap", "ngMaterial"]).controller("offerController", IncampoApp.OfferController);
})(IncampoApp || (IncampoApp = {}));
</script>
</body>
</html>
Do you have any idea why?
I've found the solution here: https://github.com/angular/material/issues/11205
You just need to call $mdGestureProvider.skipClickHijack();
angular.module('myapp', ['ngMaterial', 'ngMessages'])
.config(function($mdGestureProvider) {
// For mobile devices without jQuery loaded, do not
// intercept click events during the capture phase.
$mdGestureProvider.skipClickHijack();
});
Try this :
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.6095451920282!2d90.38946702923724!3d23.72563358206513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b8dd3d3673e7%3A0xf999f4771c24183e!2sInstitute+of+AppropriateTechnology!5e0!3m2!1sen!2sbd!4v1519796378399" width="100%" height="450" frameborder="0" style="border: 0"></iframe>
This solution may help you if want simple map in your html without (Google map key). Embed Google Map with iframe
Related
The following angular piece doesn't work, it seems that in the immediately invoked function the code breaks where I create my module because angular syntax is not recognised.
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
</head>
<body ng-controller="MyCtrller">
<h1>Hello!</h1>
{{ cousin }}
</body>
</html>
<script type="text/javascript">
(function() {
var app = angular.module("MyModule", []);
var MyCtrller = function($scope) ///typo here in "MyCtrller"
{
$scope.cousin = "Karen";
}
app.controller("MyCtrller", ["$scope", MyCtrller]);
}());
</script>
I expect the result to be Karen.
Instead, I see {{ cousin }}
The error I get in console is:
Uncaught ReferenceError: angular is not defined
on the line where I create my module:
var app = angular.module("MyModule", []);
Your problem is that you are including the v2.0 version of angular (a.k.a. Angular), instead of 1.x version (a.k.a. AngularJS) while using the latter syntax. :)
Simply change your script to use the correct version and you should be good to go.
https://angularjs.org/
Just use the AngularJs script instead of Angular Script in your script like this
<script src="https://code.angularjs.org/1.6.7/angular.js"></script>
i am learning angular js.from this site https://docs.angularjs.org/api/ng/function/angular.bootstrap it is saying Use this function to manually start up angular application.
<html>
<body>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document, ['demo']);
</script>
</body>
</html>
what is the meaning of this line angular.bootstrap(document, ['demo']); ?
the above program just create a module and controller but it use bootstrap.......without bootstrap controller can not be instantiated ?.
looking for guidance. thanks
angular.bootstrap is used as an alternative approach to initializing your application without using ng-app. In the above example, you can see that there is no ng-app directive added anywhere in the document. Therefore, using angular.bootstrap you defined the app module to be associated with the document which is demo in the above example.
You can also define the modules to be used with any element that can be identified by using document.getElementById() function in the first parameter of angular.bootstrap.
Using angular.bootstrap
<html>
<body>
<div class="mycontainer" ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document.getElementById('mycontainer'), ['demo']);
</script>
</body>
For running multiple apps in an HTML document you need to manually bootstrap them using angular.bootstrap
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)
I am trying to get angularstrap working but have not had any luck yet. here is my angular code
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.tpl.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
<script>
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
});
</script>
</body>
</html>
I get this error
Uncaught object ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:33
when I take mgcrea.ngStrap out from
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
then it works. Any help will be appreciated!
angularstrap depends on angular animate..
include this
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
It is already answered here : $injector:modulerr using angular-strap?
AngularStrap is lighter and faster than ever as it does leverage the
power of ngAnimate from AngularJS 1.2+!
https://github.com/mgcrea/angular-strap/issues/651