When I am adding
<script src="/js/angular.min.js"></script>
in my html page, then I am getting this strange error
Error:-
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.0/$injector/modulerr?p0=letsendorse&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.0%2F%24injector%2Fnomod%3Fp0%3Dletsendorse%0AP%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A6%3A421%0Age%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A24%3A99%0Ab%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A149%0Age%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A1%0Ag%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A201%0An%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A7%3A342%0Ag%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A49%0Afb%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A42%3A360%0Azc%2Fc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A421%0Azc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A20%3A225%0Abe%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A41%0A%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A303%3A112%0Ab.Callbacks%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A7852%0Ab.Callbacks%2Fp.fireWith%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A8658%0A.ready%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A3264%0AH%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A693%0A
Here is my html -
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>
Please help
Without declaring module in js you are assing it in view
Try like this
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
<script>
var app=angular.module("letsendorse",[]);
app.controller("indexCtrl",function($scope){
});
</script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>
Related
I'm new to JavaScript and I'm getting this error. here below is my code:
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js">
function hide() {
// some actions
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
What could be the problem?
Try below code
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js" />
<script>
function hide() {
// some actions
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
Hey guys here is the answer but I dont know why should I write the script tag twice. Can someone explain?
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js" ></script>
<script>
function hide() {
var imgElem = $("#myImgId" );
console.log("bastın");
imgElem.css({'display': 'none' })
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
I want to get some data to app.js from the config.js file. But I have some problems.It give me an uncaught reference error.
config.js
var configData={
'cfg':{
'MyData':'Datatasdasdasd',
}};
app.js
var app=angular.module('myapp', ['appConfig'])
app.controller('AppController', function ($scope,cfg) {
$scope.yazdir=cfg.MyData;
});
var config_module = angular.module('appConfig', []);
angular.forEach(configData, function(key, value) {
config_module.constant(value, key);
});
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
</head>
<body ng-controller="AppController">
<div>
{yazdir}
</div>
</body>
</html>
Thank you.
Your scripts are in the wrong order:
<script src="config.js"></script>
<script src="app.js"></script>
I included a jsp with angular directives (A.jsp) inside a non-angular jsp(B.jsp).
If I access A.jsp directly those models "{{X}} {{Y}}" are resolving correctly to
Xvalue Yvalue
But if I access A.jsp through B.jsp I am seeing unresolved ng-model s.
{{X}} {{Y}}
What could be the reason?
My code:
Inside B.jsp
<div id="Bcontent" style="display:block;">
<jsp:include page="/jsp/superqueue/A.jsp"/>
</div>
A.jsp
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
</head>
<body ng-app="AApp">
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</body>
</html>
A.jsp
<div ng-app="AApp">
<script type="text/javascript" src="<%=webroot%>/js/angular.min.js"> </script>
<script type="text/javascript" src="<%=webroot%>/js/angular-sanitize.js"> </script>
<link rel="stylesheet" href="css/A.css">
<script type="text/javascript" src="AApp.js"></script>
<script type="text/javascript" src="ACtrl.js"></script>
<div ng-controller="ACtrl">
<h1 class="a-title">{{X}} {{Y}}</h1>
</div>
</div>
and add meta tags of A.jsp to B.jsp if not already there
I've used CDNs for all my scripts but I get the error
"Uncaught SyntaxError: Unexpected token <"
I've been stuck on this for hours, and I don't know why there's an error.
<!-- File: chapter10/simple-routing.html -->
<html>
<head>
<title>AngularJS Routing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-sanitize.js"></script>
</head>
<body >
<h2>AngularJS Routing Application</h2>
</body>
</html>
typo:
https//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
^^
Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('hei');
});
</script>
</head>
<body>
<input type="button" id="btn" />
</body>
</html>
I'm getting an "object not supported" error on $(document).ready. I'm also getting this error: Uncaught SyntaxError: Unexpected token ILLEGAL
Your code seems to be correct, it looks like jQuery file is not loaded, verify that it has correct path.
This works:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { alert('hi'); });
</script>
</head>
<body>
</body>
</html>