Error using Angular.js - javascript

I've been doing an Angular.js course, and now that I finished it, I wanted to give it a try and do some tests.
I used the basic html file for beginning:
<html ng-app="app.js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="plugins/angular-min-1.4.3.js"></script>
</head>
<body>
</body>
</html>
... which points to the simple angular app.js main module declaration:
var app = angular.module('app', []);
Nothing strange here, no? I tried making a few directives and so, but nothing worked. Then, I found this error, which appears as soon as I only have the above code. I guess it's not adding well the plugin or I'm not declaring well the app variable.
12:32:44.547 Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=app.js&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3Dapp.js%0AJ%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A6%3A416%0Ade%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A24%3A66%0Aa%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A23%3A109%0Ade%2F%3C%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A23%3A1%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A37%3A381%0Am%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A7%3A320%0Ag%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A37%3A229%0Aeb%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A40%3A1%0AAc%2Fd%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A19%3A339%0AAc%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A20%3A151%0AZd%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A18%3A464%0A%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A289%3A428%0Aa%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A176%3A73%0AGf%2Fc%40http%3A%2F%2Flocalhost%2FAngularPruebas%2Fplugins%2Fangular-min-1.4.3.js%3A35%3A212%0A1
angular-min-1.4.3.js:6:415
Why does this happen?

You have an error in html.
Your app is app, not app.js.
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="plugins/angular-min-1.4.3.js"></script>
</head>
<body></body>
</html>

Ok, I was being really silly not adding the app.js file. Now that I added it, ng-app="app" finds it properly.

On ng-app, you must say the name of the app, in this case it's "app" and not the file. I recommend you also not using ng-app on the HTML tag.

Related

How to get rid of emscripten logo and console while only having a canvas?

Whenever I compile my C code with emcc main.c -o index.html emscripten generates an html file with their logo and some buttons and the console. But I don't want those. I only want the canvas where I can show my SDL rendered stuff.
I did a little bit of research and found this question in stack overflow. Apparently you have to enter emcc --shell-file and give it some template html as an argument.
So I made a template html file like so
<html>
<head>
<title>Some title</title>
</head>
<body>
</body>
</html>
But when I ran emcc main.c -o index.html --shell-file template.html it gave an error. Apparently emscripten looks for some think like - {{{ SCRIPT }}}.
So I added {{{ SCRIPT }}} inside my body. It compiled fine. But when I ran my index.html in localhost:3000 I got an error in the console which said cannot find addEventListener of undefined.
[N.B. I am running an SDL program. The one mentioned in their docs
What should I do? Thanks in advance
Here is a minimal example that you can use as your index.html, assuming your canvas code is in index.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- Create the canvas that the C++ code will draw into -->
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<!-- Allow the C++ to access the canvas element -->
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
<script src="index.js"></script>
</body>
</html>

How TO - Include HTML

i want to include HTML Nav Bar, in Index HTML File.
(I prefer to follow suit) I do not know what wrong I did, but it does not show me the Nav bar..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home Page</title>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<div w3-include-html="navbar.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
You can OR solve this with PHP, as #floreich mentioned, otherwise I see your code is correct but perhaps your path to the file is not correct.
I mean this line of code: <div w3-include-html="navbar.html"></div>.
Try to navigate to the correct path of your file called 'navbar.html', and it should work. Let me know! :)
This might help:
<div w3-include-html="dir/navbar.html"></div>
As you can see 'dir/' is added before 'navbar.html', which is a directory where 'navbar.html' is located.
Perhaps this explanation might help to understand above: https://www.w3schools.com/hTml/html_filepaths.asp
EDIT:
'dir/' is just a name, so change it to YOUR directory name.

How to create Global Js function using Angular 2+

I want to generate following html/js using angular 2+ as a output is there way to do it ?
index.html
app.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="function-file.js"></script>
</head>
<body>
</body>
</html>
app.js
function meetNowCallOnly(){
console.log('clicked');
}
You are probably looking for the build process of Angular. In angular you can do two kind of builds, JIT and AoT. You can have a look at https://angular.io/guide/deployment

Chrome Developer Tool Console does not like Jquery functions

I am not sure what I am doing wrong but in my application when I try to do something like
$('#root').text();
I get
VM269:1 Uncaught TypeError: Cannot read property 'val' of null(…)
I have no clue why as I am referencing jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>Document</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--materialize does not understand jquery if I use it as import-->
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
I am using reactjs but I don't think that should be a problem and the fact that I have no problems with firebug in firefox when I do the same command.
Edit
My bad $('#test') is something rendered into "root" div but same issue. So I just updated my query to do $('#root').text()
but doing $('#root') works it finds the element and like I said in firebug everything works.
You are trying to get the value from a tag with id='test' and you don't have one in your HTMl.
If you have used $('#root').val() it'd work.
Helpful selector link
I believe you want the value of id="test". However, I do not see id="test" on your html file that you have included. Furthermore, you can also try $('#test').text() that will grab html text.

Angular expression does'nt work

I'm starting to coding in angular.js on webstorm:
<!DOCTYPE html>
<html ng-app="store">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="store">
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
but the browser display
Nothing here {{'yet' + '!'}}
{{1 + 1}}
what can i do?
You don't provide enough details to resolve the issue, but I made these four changes to your HTML to get it working, at least with respect to AngularJS:
Remove the 'ng-app' attribute from the body tag.
Use a CDN URL for angularjs.
Remove the reference to your js file.
Remove your store app from the 'ng-app' attribute in the html tag.
This modified version of your HTML runs fine using WebStorm:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<p>Nothing here {{'yet' + '!'}}</p>
{{1 + 1}}
</body>
</html>
Once you see that working, you can progressively undo the changes I made (undo 2, then 3 then 4, but retain change 1), and retest to identify the problem.
More details are needed to determine the root cause, but the most likely issues are:
Your angularjs file can't be found.
Your "app.js" file can't be found.
Some problem(s) with your code in app.js.
But since you are using WebStorm, it may be able to identify your precise problem. Run Code=>Inspect Code on your project, then review the output. It will identify very basic problems, such as failing to locate your script files.

Categories

Resources