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.
Related
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
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.
This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
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.