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;
}
]);
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.
Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
app.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
My folder structure
root/
angular.js
app.js
index.html
Thank you
I hope this helps.
index.html
<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
script.js
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview
Answering the question of what is wrong and if they changed something.
AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.
Controller
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Enter text:
<br />
<input type="text" ng-model="hellomodel" />
<br />
<br />
<h1>
{{hellomodel}}</h1>
<script language="javascript">
var myapp = angular.module("myApp", []);
myapp.controller("myCntrl", function ($scope) {
$scope.hellomodel = "Hello World!";
});
</script>
</div>
</body>
</html>
http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx
The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular
Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js
Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.
The angular.js developer guide is also really helpful!
I'm getting started with kendo & angular - free version - and I have a page that renders and behaves okay, but throws an error in the background.
I get an
"Uncaught TypeError: Cannot read property 'jQuery' of undefined" in /js/kendo.angular.min.js:16
I think I have a wrong dependency / am missing one, but I'm not sure which. The kendo scripts and css are from the core download page http://www.telerik.com/download/kendo-ui-core
Whats going on here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kendo With Angular</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
</head>
<body ng-app="KendoDemo">
<div ng-controller="Demo">
{{hello}}
<input kendo-date-picker k-ng-model="dateObject" />
{{date | date:'fullDate'}}
{{dateObject | date:'fullDate'}}
</div>
<script>
angular.module('KendoDemo',['kendo.directives'])
.controller('Demo', function($scope) {
$scope.hello = 'Hello World';
})
</script>
</body>
</html>
The kendo.ui.core.js script needs to go before the kendo.angular.js script:
proper script order
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
I'm trying to build up a REST client written in AngularJS that uses $resources for consuming the REST service and ng-grid library for the User Interface.
By using just the $resource module dependency my code works, however if I introduce also the ngGrid dependency it just displays an empty div.
I've little experience with modules but the syntax seems correct....
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>
<script language="javascript">
angular.module('myApp',['ngResource'], ['ngGrid']);
function Ctrl($scope,$resource) {
var restservice = $resource(
'http://host/myapp/json', {
}, {
query: { method: 'GET', isArray: true }
}
);
$scope.gridOptions = restservice.query();
};
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
Do you see any error in the above code ?
Thanks!
You don't need to pass in a separate array for each module, nest them under one array like this.
angular.module('myApp',['ngResource', 'ngGrid']);