I'm new to Angular JS , trying to develop little application on Calculations .
My Code is as follows"
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
</head>
<body>
<div ng-app="Calculator">
<div ng-controller="Operations">
<div>
Number 1 : <input type="number" ng-model="Number1" />
Number 2: <input type="number" ng-model="Number2" />
<p>
The addition of above two numbers is {{Number1+Number2}}
</p>
</div>
</div>
</div>
<script>
var module = angular.module('Calculator', []);
module.controller('Operations', function ($scope) {
$scope.Number1 = 1;
$scope.Number2 = 10;
});
</script>
</body>
</html>
I have the Javascripts files available in My project, When I run the app, the browser console indicates that the JS are not being loaded. Don't know why !
The Expression {{Number1+Number2}} is the same in browser . It is not executing the expression
The Browser console has following errors:
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Failed to load resource:"Path to the Script file" the server responded with a
status of 404 (Not Found)
Uncaught ReferenceError: angular is not defined
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
You are not loading angular.js and angular-route.js properly, check your paths.
Your project structure has to look like
index.html
scripts
|---angular.js
|---angular-route.js
If you use
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
Please note , you might need to disable adblocks if necessary.
Drag and drop in visual studio doesn't work if you are using HTML pages but it does work for mvc ,asp.netwebforms.
I figured this after one hour
Related
I get always the following error in angular js when I add ng-app="adminApp" to the body. The error is thrown during auto bootstrap.
Uncaught Error: [$injector:modulerr] Failed to instantiate module adminApp due to:
Error: [$injector:nomod] Module 'adminApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
If I change it to only ng-app the error won't show up but i can't use ngRoute as it needs the app to be given a name. I read lots of solutions for this problem last 2 days but i found none of them working for me.
I removed everything and still won't work. I left only the ng-app and 3 elements.
index.html:
window.mainmodule = angular.module('adminApp', ['ngRoute','ngMaterial']);
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" />
</head>
<body ng-app="adminApp">
<div id="loadingscreen">
<div style="left:0;top:0;width:0px;height:20px;background-color:#0000FF;" id="loadingbar"></div>
<div class="center">Loading...</div>
</div>
<script type="text/javascript" src="utils/angular.js"></script>
<script type="text/javascript" src="utils/angular-route.js"></script>
<script type="text/javascript" src="utils/angular-animate.js"></script>
<script type="text/javascript" src="utils/angular-aria.js"></script>
<script type="text/javascript" src="utils/angular-material.js"></script>
<script type="text/javascript" src="utils/require.js" data-main="modules/main"></script>
</body>
</html>
EDIT: I use angular v1.5.0-rc.0.
Codepen: http://codepen.io/anon/pen/pgwZLq
original link
If you are using require.js, you need to programmatically bootstrap your angular application.
//kickoff the app
require(["app", "routes" ], function(){
angular.module('adminApp', ['ngRoute','ngMaterial']);
angular.bootstrap(document, ["adminApp"]);
});
When angular.js is loaded, it traverses the DOM and looks for "ng-app" to start the bootstrapping process. At that point of time your require.js dependency files hasn't been loaded on the page yet. So when angular tries to start the application and looks at your "adminApp", it doesn't exists yet. So, by deferring the bootstrapping, you'll have a chance the load your js files before angular goes out and bootstraps your app.
Remove ng-app tag from html. It will be added during bootstraping.
I am unable to find/pinpoint the root cause of the error.
In my javascript file I keep getting a green squiggly under the the word angular. I don't understand why. (Im using Visual Studio Code)
HTML
<html ng-app="myapp">
<head>
<title>Hello</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="C:\Users\john\Desktop\test.js"/>
</head>
<body >
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter name here">
<h1> Hello, {{yourName}}</h1>
<div ng-controller="HelloController">
<h2>Say hello to {{helloTo.title}} </h2>
</div>
</body>
</html>
Javascript
(function(){
var app = angular.module('myapp', ['ngRoute']);
app.controller("HelloController", function($scope){
$scope.helloto={};
$scope.helloto.title="AngularJS";
});
})();
ERROR
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fnomod%3Fp0%3Dmyapp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A24%3A186%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A23%3A251)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A23%3A494%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A38%3A117%0A%20%20%20%20at%20n%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A7%3A333)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A37%3A488)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
You are missing the javascript file for ng-route.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js
That is the cdn for it. Load it in and it should work.
You have to refer the script for ng-route
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js">
Seems like you didn't add the ng-route.js file since your requiring it in angular.module('myapp', ['ngRoute']);
try to add this js right after the angular.js in html file
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js
and check C:\Users\john\Desktop\test.js is loading correctly
I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
I am trying to load JavaScript from an external file in an Eclipse web application.
My folder structure is as follows:
nata
....src
........main
............webapp
................scripts
....................jquery.js
....................nata.js
I invoke the web app by: "localhost:8080/nata/login"
I have tried
<script src="${pageContext.request.contextPath}/nata/login/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/nata/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/scripts/nata.js"></script>
but all to no avail. The Javascript will not load.
Here is my html:
<html>
<head>
<title>First Page</title>
<script src="scripts/nata.js"></script>
</head>
<body>
<h1>JavaScript Load Test</h1>
<p id="demo">This is a paragraph</p>
<button onclick="displayDate()" type="button">Display Date</button>
</body>
</html>
Here is nata.js:
function displayDate() { document.getElementById("demo").innerHTML=Date(); }
When I put the HTML in a windows file (and use the following line)
<script src="nata.js"></script>
in folder X and put nata.js in the same folder X, the JavaScript works perfectly.
I have tried all of the lines below:
<script src="/scripts/nata.js"></script>
<script src="scripts/nata.js"></script>
<script src="nata/login/nata.js"></script>
<script src="/nata/login/nata.js"></script>
<script src="/nata/nata.js"></script>
<script src="nata/nata.js"></script>
and probably several more combinations.
I get the error message "displayDate() is undefined"
Sometimes I get the error message "Syntax error" on line 1 of nata.js. However, as I mentioned above, when I put the same HTML and the same nata.js side by side in a windows folder and open the HTML file with a browser and click the button, the JavaScript works perfectly. I just can't get it to load the JavaScript inside an Eclipse web app.