I am just beginning to learn javascript and angularjs using
https://thinkster.io/mean-stack-tutorial
I set up a basic IntelliJ javascript project and created the following files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="HelloWorld" ng-controller="MainCtrl">
<div>
{{test}}
</div>
</body>
</html>
and app.js
var app = angular.module('HelloWorld', []);
app.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world!';
}]);
but I keep getting "ReferenceError: angular is not defined" when I attempt to run the program. Searching through the other questions on this website most of the answers involve the
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js">
line being called after app.js is started, which I don't think is the problem here. Can anyone give some insight for a complete beginner?
I'd like to comment directly, but I'm not a power user enough... so I'll go here!
What yarons mean, was use the developer apps in your browser (please not IE) and check the output in the console and also in the console where your Node app is running.
Two suggestions here:
Are the dependencies correctly set in your application? Check your
package.json file, find the angular tag and check whether there
might be a version conflict.
Copy the following files from /node-modules/angular in
/public/libs/angular and set your script ref in your index.html to
angular.min.js
angular.min.js.map
angular-csp.css
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
Note that the most common way is to use the libs from CDN, but there are reasons to keep them locally...
Related
I want to use this library : https://hello-week.vercel.app/
I'm having a hard time to understand how to use it. I know JS and I never used Typescript or Nodejs. I found the .js and .css of this library but it's seems not to work
"calendar.js:1 Uncaught ReferenceError: HelloWeek is not defined"
Can I included like a normal js file ?
Yes the installation guide is not really clear, here is how to get it done:
First of all this line is simply wrong
new Hello Week({
There should not be a space there, do this instead
new HelloWeek({
Also, you will need the language file. Ether host it in its particular directory hierarchy or use the langFolder option to specify where it is.
dist
-- langs
-- -- en.json
Finally, this dose not work when not in a server due to a CORS issue. Serve the files through a server and you will have it working.
You can find the basic usage in the Installation page of the docs. Just ensure to reference hello.week.min.js, hello.week.min.css and hello.week.theme.min.css. Typescript or Node.JS don't seem to be necessary.
Here is a quick HTML + JS example:
<link href="hello.week.min.css" rel="stylesheet" />
<link href="hello.week.theme.min.css" rel="stylesheet" />
<div class="calendar"></div>
<script type="text/javascript" src="hello.week.min.js"></script>
<script>
new HelloWeek({
selector: '.calendar'
});
</script>
I am trying to add heap analytics script in my react project but it keeps throwing this error "'heap' is not defined". And I cannot compile the project due to this error.
As far as I know, heap wants their code to run in <head></head> tags. But I can't figure out how to make a code run inside <head></head> in react. The rest of the scripts like GTM and FB pixel code is running fine.
Any help is appreciated.
Just call it off:
window.heap.identify('random#myemail.com', 'email');
For some reason this isn't more clear on their website but if you check their docs here then you'll see that you just have to call window.heap.track() not just heap.track().
Also, you want the script as they mention in your index.html file at the bottom of the <head> element aka right before </head>
You should be able to include the heap script under head tag as below (Set right path to script in place of yourHeapScriptPath)
<script type="text/javascript" src="yourHeapScriptPath.js"></script>
If your're using webpack, you've got two options:
A) put your script in index.html and ask in your React-Scripts if the variables are defined
B) Put the scripts in your webpack entries, like the following:
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
See webpack-entries for more information.
I am currently using 1.5.3 AngularJS Version & ng-include="'file.html'" is not working
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
<!-- Include AngularJS Files -->
<script src="vendor/AngularJS/angular.min.js"></script>
<title>Website Title</title>
</head>
<body>
<!-- Include Content.html to index.html -->
<header ng-include="'content.html'"></header>
</body>
</html>
When i run this code it doesnt show anything on index.php
content.html exists with:
<h1>Hello, this is my website.</h1>
It will just not work.
my plunker code to see how i am doing it
plnkr.co/edit/OagoGf8AavIRxFgGVZSl
You have to have to use angular.module to have angular bootstrap your application to the dom. This is how angular starts.
The format is
angular to call angular,
.module to specify to angular which module you are looking for,
('myapp' the name of the module
, []) to specify any dependencies your app has. You can attach all sorts of stuff to your app which is extremely useful.
altogether, that's angular.module('myApp', [])
Note, you can hook into your app without re-bootstrapping at anytime with angular.module('myApp') without the array of dependencies. This will retrieve your application without instantiating it. Then you can chain controllers, factories, whatever to it like this:
angular.module('myApp').controller('MyCtrl', function($scope) {})
It looks like you're coming from PHP, so you're in for a real treat once you start using angular. Good luck with your app!
Here, I edited your plunker: http://plnkr.co/edit/fQnngC49d5QsHAzti7Nc
just take a look at console errors?
Plunker says that there is no module "myApp". So, you didn't include any .js files in plunker.
Actually I didn't know, is angular work right way without any js, but in normal case you should define the main app module and controllers for each page
Angular isn't actually running on that page. Just including angular in your <head> isn't quite enough.
Here's what you've done so far:
Define an HTML file that pulls in the angular library.
Write HTML that tells the page that it should be using the angular module myApp.
What you need to do now is simply create that module. To so this, just create a javascript file with one line:
angular.module('myApp', []);
This creates an angular app called myApp on the global scope. Then add a <script> tag to include the new .js file in your index.html. That's it! Now Angular will look at you HTML file, see that you want the app myApp to run on the HTML, and it will find that app in your new JS file.
Here's your plunkr updated
Hope this helps.
I am creating a website with HTML5 and CSS, not using CMS. My next goal was to make the website in many languages so I searched and found many libraries. I am newbie to this and went for the easiest one or the one with more comments, examples...
So I took i18next, but I also tried i18n, i18next.amd... Right now I am stuck because I was following a few tutorials and cant make this work... Everytime I get this error
Uncaught ReferenceError: i18n is not defined
So I created an empty project just to make this work and learn how to do it. This new project is really light. The structure is:
index.html
locales
en
translation.json
es
translation.json
default
translation.json
js
jquery.min.js
i18next.min.js
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/i18next.min.js" ></script>
<script type="text/javascript">
var options ={
lng: "en" ,
resGetPath: './../locales/__lng__/__ns__.json'
};
i18n.init(options, function(t) {
$(".nav").i18n();
});
</script>
<ul class="nav">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</body>
</html>
and all of the JSON files are like this:
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
I wish someone can help me, and I will really appreciate. (sorry for my english btw)
Tutorials I mentioned:
http://i18next.github.io/i18next/
http://jsbin.com/yaxofuhuzu/1/edit?html,js,output
www.davidhamannmedia.com/en/post-i18next-an-easy-to-use-translation-javascript-library
And many more...
The documentation for this library is a mess, mostly because the author decided to rewrite it from version 1.x to 2.x and the API has changed drastically. The documentation you can now find on http://i18next.com/docs/ refers to version 2.x, while a lot of the blog and stackoverflow articles refer to version 1.x, adding to the confusion. To add insult to injury, I can't find any complete documentation for version 1.x anymore (which by the way, is less than a year old).
Now, to answer your question, the options and API you seem to be using are from version 1.x (for example, resGetPath doesn't exist in version 2.x). Also, in 2.x, i18n has been replaced by i18next.
On the bright side, the author seems to reply fast to questions, so you might as well open an issue on the project github page. Or check this:
https://github.com/i18next/i18next/issues/618
I'm trying to use the example code from https://developers.google.com/maps/documentation/javascript/examples/layer-kml (with a few modifications, like lat/long) but every time I try to run it, it says google is undefined.
As a programmer, I'm pretty green-how do I fix it/prevent it, and what does it mean?
Because it is, you need to get Goggle's API first:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
...
<script>
/* Code Here */
</script>
Look here for how to get an API key in the developers guide.
If you look at the HTML+JavaScript notice they included the API at the top:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
In the link you sent, there's a section called "Getting Started":
https://developers.google.com/maps/documentation/javascript/tutorial
In there you will find out that a basic structure of a HTML page that is going to work with the API functionalities needs a declaration of the Javascript containing the API code (i.e., this code will also provide this 'google' object that you need).
https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>