I have this code because I want inlude the Google maps in my webApp but don't work. This is the page html:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/angular.js/angular.js"></script>
<script src="js/libs/angular.js/angular-route.js"></script>
<script src="http://maps.google.cn/maps/api/js?sensor=false"></script>
<script src="js/libs/mappa/lodash.js"></script>
<script src="js/libs/mappa/angular-google-maps.min.js"></script>
</head>
<body>
<div>
<ui-gmap-google-map center=map.center zoom=map.zoom style="width: 400px; height: 400px;"></ui-gmap-google-map>
</div>
</body>
</html>
This is my controller in AngularJs:
var modulo = angular.module('progetto', ['ngRoute', 'uiGmapgoogle-maps']);
modulo.controller('descriptionController', function ($scope, $routeParams, $http) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
}).
error(function (data, status) {
$scope.listaEventi = "Request failed";
});
Where is the error? I think that i import exact library!
You're missing quotes around your html attributes...
You're missing ng-app
You're missing ng-controller
You're calling .error on your controller (?)
You need to define this css rule:
.angular-google-map-container { height: 400px; }
Inline style on your directive is not good enough.
Please check your js error console next time. Your statement of "there are no errors" is most likely not true.
Here's a working fiddle... http://jsfiddle.net/ybtn4kn2/
You seem to have forgotten your
<div ng-controller="descriptionController">
And you will need to pass in the library to the controller
.controller("descriptionController", function($scope, uiGmapGoogleMapApi)
Related
I have three states in my simple ionic project. I want to add a map to home page after logged in. When I tried to add a map in map.html file which is a template file, it appears when map.html opened via browser. However, when I try to reach this state(map.html) by using $stateProvider the map does not appear.
My map.html file is :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 400px;
}
</style>
</head>
<body ng-controller="mapctrl">
<ion-header-bar class="bar-dark"> <h1 class="title">Home Page</h1></ion-header-bar>
<ion-view>
<div id="map" ng-init="initMap()"></div>
<button ng-click="goOther()" class="button button-block button-dark">For more detail please click!</button>
</ion-view>
</body>
</html>
My app.js is :
var app =angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller:'loginctrl'
})
.state('map',{
url:'/map',
templateUrl:'templates/map.html',
controller:'mapctrl'
})
.state('other',{
url:'/other',
templateUrl:'templates/other.html',
controller:'otherctrl'
})
$urlRouterProvider.otherwise('/login');
}])
app.controller('loginctrl',function($scope,$state){
$scope.goMap = function(){$state.go('map');};
})
app.controller('mapctrl',function($scope,$state){
$scope.goOther = function(){
$state.go('other');};
$scope.initMap = function () {
console.log("deneme");
var myLatlng = new google.maps.LatLng(51.5120, -0.12);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
};
})
app.controller('otherctrl',function($scope,$state){
$scope.goLogin = function(){$state.go('login');};
});
I've also tried to add the map directly in map.html file but it doesn't appear,either.
Thanks in advance.
Google maps works only with https in chrome and it may not have any dependency with $stateProvider
I want to pass a parameter to the next page onclick of a button.
I have tried as below; on the first page I have a textarea and I want to pass that value to the next page on button click using AngularJS, I have tried as below, but it's not working.
index.html
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="sample.js"></script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<input type="button" value="send" onclick="send()">
<script>
function send(){
window.location ="second.html";
}
</script>
</body>
</html>
sample.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
second.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Passed data</title>
<script src="sample.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
<br>
</body>
</html>
Please can you help me to figure it out?
First read this https://docs.angularjs.org/guide/$location
Remove send() function
function FirstCtrl($scope, $location, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
$scope.send = function(){
$location.path('/second').search({id: 12});
};
}
<input type="button" value="send" ng-click="send()">
To send the parameter to next page you have to use $location service.
$location.path('/second').search({id: 12});
But again this will not work for you as you are not using AngularJS for routing , you are using JS for that. I suggest following this PhoneCatApp to learn Angular basics
I included angular js in my asp.net mvc project but when i call object in controller
the angular js expressions do not evaluate
here is the app.js code please suggest
var app = angular.module('app', []);
app.controller('createController', createController);
and here is the createController code
var createController = function ($scope) {
$scope.mydata = 'I work!';
}
here is what i include in html
<html ng-app="app">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/app.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<div ng-controller="createController">
{{scope.mydata}}
{{6+9}}
from your code, I can only suspect two things
your javascript does not have the proper scope
do not use the word scope in your "scope" code
first part: javascript scope:
Always use an IIFE, in your case your code should look like:
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
second part: don't use the word scope
in your HTML, you should not use the word scope as it's already inherit in your controller as that's the model you are passing to the "view"
hence, your code should look like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
</body>
</html>
the result is:
I work! 15
live code in JSBIN so you can check it out.
your HTML page, all together should look like this:
if you have only one file
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS code -->
<script>
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
</script>
</body>
</html>
if you're using 2 files
file index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS extra files -->
<script src="createController.js"></script>
</body>
</html>
file createController.js (in the same folder as index.html)
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
I think the problem may well be the order in which you are including your scripts:
Try the following:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<script src="~/appAjs/app.js"></script>
Reasoning is that app.js tries to define a controller using a function that has not been defined when the function is run.
Points that {{scope.data}} should be {{data}} are correct, but do not explain {{6+9}} not working.
You need to create the controller in the context of the app module.
Your app.js should just have
angular.module('app', []);
and your createController code should look similar to this
angular.module('app')
.controller('createController', function ($scope) {
$scope.mydata = 'I work!';
});
You need to change the expression from
{{scope.mydata}}
to
{{mydata}}
Expression have access to scope and no keyword is required to access a scope object.
first of all to note that I am a very new on AngularJS and I try to create my first app by using the reed.co.uk API, for this reason, please don't shut me .. !! :)
The current state of my application is very basic and consists of the following:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="reed" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Reed Start Up App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="components/services/services.js"></script>
<script src="viewHome/home.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('reed', ['ngRoute', 'reed.home', 'reedService'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.otherwise(
{
redirectTo : '/'
}
);
}]);
home.js
'use strict';
angular.module('reed.home', ['ngRoute', 'reedService'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.when(
'/', {templateUrl : 'viewHome/home.html', controller : 'HomeCtrl'}
);
}])
.controller('HomeCtrl',['$scope', 'Jobs', function($scope, jobs){
$scope.performSearch = function()
{
console.log(
jobs.query(
{
keywords : $scope.jobTitle
},
{
method : 'GET',
headers : {
username : '9f0ebf61-8795-49d7-a1d7-123456789123'
}
}
)
);
};}
]);
home.html
<div class="row">
<div class="col-sm-12">
<form role="form">
<div class="form-group">
<label form="job-title">
Job Title
</label>
<input ng-model="jobTitle" id="job-title" placeholder="Please enter your desired job title" class="form-control" type="text" />
</div>
<div>
<button type="submit" class="btn btn-default" ng-click="performSearch()">Submit</button>
</div>
</form>
</div>
</div>
services.js
'use strict';
var jobsServices = angular.module('reedService', ['ngResource']);
jobsServices.factory('Jobs', ['$resource', '$http', function($resource, $http){
return $resource(
'http://www.reed.co.uk/api/1.0/search',
{},
{
query : {
method : 'GET',
headers : {
username : '9f0ebf61-8795-49d7-a1d7-123456789123'
}
}
}
)
}]);
The Reed.co.uk API documentation says the following:
Important:
You will need to include your api key for all requests in a basic authentication http header as the username, leaving the password empty.
Based on the above message I try to set my API key as username on my request headers. When I try the above approach with API Request plugins on my Chrome, the request is ok. I get normally whatever I requesting with no issue.
In my AngularJS app, the problem is that while I send a GET request, the AngularJS changing my request method to OPTIONS when I set my headers.
If I remove the headers, then the request performed with GET, but ofcourse I get Unothorized request error from the server.
Can somebody help me please ?
Question is not angular specific. Answer here is pretty good:
The OPTIONS request what you see is the preflight request, you can read about that here:
https://developer.mozilla.org/En/HTTP_access_control
http://www.w3.org/TR/cors/
http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
It's there because you're requesting a cross-domain XMLHttpRequest so the browser has to check whether your request is allowed on the remote server or not.
There are two solutions to solve the problem (as mentioned above):
implement the response for the OPTIONS request with the corresponding Access-Control-* headers
use a JSONP request instead of simple JSON
This issue is most likely due to my naivity as I am just beginning to teach myself JS and AngularJS in parallel. I have put together a simple example of what I am seeing in this plunker. Basically, my app handles an ng-repeat correctly, but as soon as I add the config method it does not replace {{menuItem.itemName}} with the value of the variable. Now, my config method is currently empty, so that may be the problem. But, I assumed I could just have a no-op method and add routes as I went, testing each one.
Here is my HTML:
<html ng-app="site">
<head>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js></script>
<script src ="script.js"></script>
<link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
<title>Site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller='mainCtrl'>
<div id="main-container">
<div id="header">Site
</div>
<div id="side-bar">
<ul id="side-bar-menu">
<li ng-repeat="menuItem in menuItems"><span class="underline"><a ng-href={{menuItem.itemLink}}>{{menuItem.itemName}}</a></span></li>
</ul>
</div>
</div>
</body>
</html>
JS:
'use strict';
angular.module('site',[]).
controller('mainCtrl', ['$scope', function($scope) {
$scope.menuItems = [{
itemName: "Home",
itemLink: "#Home"
}];
}]);
//enabling the config breaks the output (and of course ;
//above needs to be replaced with . when config enabled)
/*config(['$routeProvider', function($routeProvider) {}]);*/