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.
Related
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
I created an ng-sortable example in Plunker but it's not working.
Here's the JavaScript:
angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
$scope.presidents = [
'George Washington',
'Abraham Lincoln',
'William Jefferson Clinton'
];
$scope.dragControlListeners = {
accept: function(sourceItemHandleScope, destSortableScope) { return true },
itemMoved: function(event) {},
orderChanged: function(event) {}
};
}]);
And the HTML:
<!DOCTYPE html>
<html ng-app="sortableExample">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">
<script src="script.js"></script>
</head>
<body ng-controller="PresidentsCtrl">
<ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
<li data-ng-repeat="president in presidents" data-as-sortable-item>
<div data-as-sortable-item-handle>{{ president }}</div>
</li>
</ul>
</body>
</html>
The right stuff shows up but it's not interactive like it should be. Any idea why?
You should not include links to github source -)
Since there is no cdn for ng-sortable - just copy it to plunker.
Also you forget to add dependency of ng-app.
angular.module('sortableExample', ['as.sortable'])
http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview
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;
}
]);
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!