I might be making a really silly mistake here, but I'm not sure where I'm going wrong. Just trying to get a simple map to display on page with google maps and angular.js.
Here is my controller..
var myApp = angular.module('myApplicationModule', ['google-maps']);
myApp.controller('IndexController', ['$scope', function ($scope) {
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8
};
}]);
And here is my html page..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApplicationModule">
<head>
<title></title>
</head>
<body ng-controller="IndexController">
<google-map center="map.center" zoom="map.zoom"></google-map>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='/Scripts/lodash.js'></script>
<script src='/Scripts/angular-google-maps.js'></script>
<script src='/Scripts/angular.js'></script>
</body>
</html>
I have included all the necessary scripts and gotten angular.js from NuGet, declared my application and specified the controller.
However, the map is not displaying on the page.. Anybody able to point out why?
Related
So, I've been beating my head against the wall on a problem where angular-ui-grid's header is taking up the entire height of the screen.
I've reduced the issue down to one file in one plunk. http://plnkr.co/edit/XR7OVXjwSodqTNRBAVnv?p=preview
<html>
<head>
<title>Broken ui-grid</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="///ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script>
var app = angular.module('sample', ['ui.grid']);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script>
<script>
angular.module('sample').controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) {
$scope.uiGridOptions = {
rowHeight: 36,
data: [
{ date: Date.now() / 1000, blah1: "Test data"}
]
};
$scope.uiGridOptions.columnDefs = [
{ field: "blah1", displayName: "blah", width: 150 }
];
}]);
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body ng-app="sample" ng-controller="SampleController">
<div id="dailyGrid" ui-grid="uiGridOptions"></div>
</body>
</html>
Can anybody tell me what I'm doing wrong?
So after about an hour of searching and fiddling, I've found the problem.
All I needed to do to fix the problem was add a <!DOCTYPE html> to the document, and boom! problem solved!
<!DOCTYPE html>
<html>
... code snip ...
Plunkr with fix: http://plnkr.co/edit/6rRIcjaL1yPF6GKRTkUT?p=preview
I suspect that the browser (Google Chrome) was rendering in some non-html5 mode without the doctype. I didn't realize that there would be a difference between doctype and no doctype.
Hopefully this is useful to someone else as well.
After googling for an hour and searching in Stackoverflow I cannot get the answer. I am new to angular and this is just a practice but i cannot make it work. I get this error in the console:
Error: Argument 'StoreController as store' is not a function, got
undefined.
The code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
</head>
<body>
<div ng-controller="StoreController as store">
<h2>{{store.employee.name}}</h2>
<h3>{{store.employee.age}}</h3>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript"
src="app.js"></script>
</body>
</html>
app.js file:
(function() {
var app = angular.module('myApp', []);
app.controller('StoreController', function() {
this.employee = {
name: 'John',
age: 32
};
});
})();
Your Angular version is outdated. You're currently using 1.0.7. The controllerAs construct was only added in version 1.2. You should up your version to the latest.
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
This whole app should consist of an h1 element that says 'Adrian' and a paragraph that says 'He lives in Orlando'. I can't figure out what's wrong with my code. BTW, I already know that this isn't the best design pattern for Angular, but I just wanted something quick to get my feet wet with the framework.
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
}
</script>
</body>
</html>
You are not making Angular aware of your MyController function:
<!doctype html>
<!-- tell Angular what module to use -->
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{person.firstName}}</h1>
<p>He lives in {{person.city}}</p>
</div>
<script>
angular
// Define our module
.module('app', [])
// Define our controller
.controller('MyController', function MyController($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
</body>
</html>
Get in the habit of assigning app names and controllers to the apps, here:
http://plnkr.co/edit/gfWh6fqWeni8s8M0iG1B?p=preview
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.person = {
'firstName': 'Adrian',
'city': 'Orlando'
}
});
</script>
I am not even trying to be a patronizing ass, but check the tutorial here. It will take you a couple of hours. Then head over to Jenkov's "complete" tutorial.
Your code works fine. I believe your angular source file is the issue try switching it to a CDN src or double check your path
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
http://jsfiddle.net/sfwtfp35/2/
Im sorry for posting so much about angular tonight but im running into a lot of trouble creating my practice app and it is important I have it running and test created by tomorrow.
I had everything working a few hours ago but now only {{title}} appears on the page and I get the error TypeError: Cannot read property 'labels' of undefined. I am hoping it is just something small that I am missing but I cannot see it at all one thing I might mention is I renamed my service dataSrv from dataRepository other then that I have mostly just been writing tests (or trying too) but I dont think that has anything to do with it.
If anyone can help im getting panicky.
Thanks!
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ChartApp">
<head>
<title>Chart.js Trial</title>
<script type="text/javascript" src="/Scripts/angular/angular.js"></script>
<script type="text/javascript" src="/Scripts/chartjs/Chart.js"></script>
<script type="text/javascript" src="/Scripts/angular-chart.js-master/dist/angular-chart.js"></script>
<script type="text/javascript" src="/Scripts/controller/main-controller.js"></script>
<script type="text/javascript" src="/Scripts/service/data-service.js"></script>
<script type="text/javascript" src="/Scripts/directive/color-directive.js"></script>
<link href="/Scripts/angular-chart.js-master/examples/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/angular-chart.js-master/dist/angular-chart.css" rel="stylesheet" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="MainCtrl">
<h1 add-color-header>{{title}}</h1>
<canvas id="base" class="chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
</div>
</body>
</html>
data-srv.js
angular.module("ChartApp")
.factory("dataSrv", function () {
return {
labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
data: [500, 300, 300, 40, 220],
type: "PolarArea",
title: "Angular Chart Expriment"
};
});
main-controller.js
var app = angular.module("ChartApp", ["chart.js"]);
app.controller("MainCtrl", ["$scope",
function ($scope, dataSrv) {
$scope.labels = dataSrv.labels;
$scope.data = dataSrv.data;
$scope.type = dataSrv.type;
$scope.title = dataSrv.title;
}
]);