I am getting error ng:areq with the following code.please help me to figure out where it is causing.Thanks!
<!DOCTYPE html>``
<html ng-app>
<head>
<title>This is example</title>
</head>
<body>
<h1 ng-controller="HelloWorldMessage">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldMessage($scope){
$scope.helloMessage="Hello World";
}
</script>
</body>
</html>
notice that your controller is not defined you just defined a function ,, you need to create a module first
angular.module("app",[]);
and then add you controller to this module using this line
angular.module("app").controller("HelloWorldMessage", HelloWorldMessage);
this way your code will work properly
Related
I'm looking to do a simple process using the skypack (https://cdn.skypack.dev/) module in javascript.
I have described the following script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<button id="button" onclick="mybutton">click</button>
<!-- <script type="module" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined -->
<script type="text/javascript" src="https://cdn.skypack.dev/#...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module
import { METHOD } from "<modulename>";
function mybutton(){
console.log("aaa");
// ... snip ...
}
</script>
</body>
</html>
However, the module does not work in the script tag.
I have tried two things.
import in the script tag.
This gave me the following error.
Uncaught SyntaxError: export declarations may only appear at top level of a module.
It seems that you need to use <script type="module" when importing a module.
do script type="module" .
This gave the following error:
Uncaught ReferenceError: mybutton is not defined.
It seems that the function defined directly below is not found.
What can I do to resolve these?
I will post the code that worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="button">click</button>
<script type="module">
document.getElementById('button').addEventListener('click', mybutton);
import { METHOD } from "https://cdn.skypack.dev/.../<modulename>";
function mybutton(){
console.log("aaa");
// METHOD(arg); ...
// ... snip ...
}
</script>
</body>
</html>
I am practicing Angularjs and made a simple module and controller. Im trying to display an elements data inside the controller on the HTML view page but the {{student.name}} only pops up. and im getting an error message saying:
angular.js:15697 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.8.2/$controller/ctrlreg?p0=MyController
Here is my js code:
var myApp= angular.module('myApp',[]);
myApp.controller=('MyController', function($scope){
$scope.student={
"name":"kevin",
"age":"21",
"school":"NYU"
};
});
Here is my HTML code:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="MyController">
{{student.name}}
</body>
</html>
please help.
The way you have defined your controller is incorrect. You can do something like below:
angular.module('app').controller('MainCtrl', function ($scope){
$scope.student={
"name":"kevin",
"age":"21",
"school":"NYU"
};
});
Sample working code here:
https://stackblitz.com/edit/angularjs-controllers-eauszw?file=app.js
I have a small problem. I'm developing a game using CraftyJS and I need to use Electron to run it, but Electron throws this error:
Uncaught TypeError: Crafty.scene is not a function
at Level1.js:4
Why does it do this? Here's the relevant code + markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Overtime-game</title>
</head>
<body>
<div id="game"></div>
<script type='text/javascript' src='./node_modules/craftyjs/dist/crafty.js'></script>
<script src='./Level1.js'>
</script>
</body>
</html>
JS:
//Relevant code:
Crafty.scene('main', function() {
Crafty.init(500,500, document.getElementById('game'));
// rest of Crafty.scene...
}
Crafty.scene('main')
FIXED ON ELECTRON FORUMS:Apparently if you require a module in the file Electron will not look in node_modules.
https://discuss.atom.io/t/solved-typeerror-crafty-scene-is-not-a-function/61273
I have created a basic angular app, with self invoking function
(function(){})
When ever I am running the application it is throwing injector error, if I remove the above code, it is working fine, I have gone through many sites but unable to fix this, and why it is happening I am unable to understand.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
</body>
</html>
script.js:
(function(){
angular.module("myApp", [])
});
Demo
You need to have like this,
(function(){
angular.module("myApp", [])
})();
DEMO
I am trying to code for the first time ever in Angular, and I can't load an expression on my page because I get the error [$injector:modulerr] Failed to instantiate module. I know there are a lot of similar issues on stackoverflow but none of them have solved my issue. The link to app.js is not broken.
HTML
<!DOCTYPE html>
<html ng-app="store">
<head></head>
<body>
<script type"text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javscript" src="js/app.js"></script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
app.js
(function(){
var app = angular.module('store', [ ]);
})();
I am just trying this locally on my computer. Thanks!
Your only problem are the typos in the code.
There's an = missing in the first script (line 5) and it's written javscript instead of javascript in the second script (line 6)
Try the following code
<!DOCTYPE html>
<html ng-app="store">
<head>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
})();
</script>
<p>{{ "hello" + "there"}}</p>
</body>
</html>
Hope it helps!