Why do I get error in console for:
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
</body>
</html>
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MyApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fnomod%3Fp0%3DMyApp%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A24%3A66%0A%20%20%20%20at%20a%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A109)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A23%3A352%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A381%0A%20%20%20%20at%20m%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A7%3A322)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A37%3A229)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A40%3A503)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A19%3A339)%0A%20%20%20%20at%20Ac%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.min.js%3A20%3A151)
at angular.js:38
at angular.js:4385
at m (angular.js:336)
at g (angular.js:4346)
at eb (angular.js:4272)
at d (angular.js:1630)
at Ac (angular.js:1651)
at Zd (angular.js:1545)
at angular.js:28359
at HTMLDocument.a (angular.js:2996)
You need to declare the module and controller under the script or in a separate file
<!DOCTYPE html>
<html ng-app="MyApp" ng-controller="myCtrl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
</head>
<body>
<h1>{{text}}</h1>
<script>
var app = angular.module('MyApp',[]);
app.controller('myCtrl',function($scope){
$scope.text = "Works";
});
</script>
</body>
</html>
Because you haven't defined 'MyApp' or 'MyCtrl'. They need to be defined in a js file included on your web page. I suggest you read a basic tutorial on setting up an AngularJs app.
Related
I have this javascript code in a script called index.js and the html in an index.html, the problem is that the "message" variable is not painting it on the screen.
Does anyone know what I'm doing wrong? I am very used to Angular but I have just started with AngularJS since I have a project to deliver to the client and they want it in this technology.
A greeting.
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador(){
var scope = this;
scope.mensaje = "Hola, ¿Como estas?";
console.log(scope);
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>
Use $scope instead of this.
Only the variables declared in $scope are accessible in HTML view.
More here: 'this' vs $scope in AngularJS controllers
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador($scope){
var scope = $scope;
scope.mensaje = "Hola, ¿Como estas?";
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>
You can directly use
$scope.mensaje = "//your text here";
Html Code
var myApps = angular.module('myApps',[]);
myApps.controller('myAppController', function($scope){
$scope.message = "Hello World";
});
<html lang="en" ng-app="myApps">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="app/lib/angular.min.js"></script> -->
<script src="//unpkg.com/angular/angular.js"></script>
<!-- <script src="app/app.js"></script> -->
</head>
<body>
<div ng-controller="myAppController">
<p>{{message}}</p>
</div>
</body>
</html>
I am getting this error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.7.9/$injector/modulerr?p0=myAp…Practice%2Fmodule%2Fapp%2Flib%2Fangular.min.js%3A38%3A444%0A
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model='name'>{{name}}
</div>
<!-- Angular JS-->
<script src="../vendor/angular/angular.min.js"></script>
</body>
</html>
i'm trying out angular for the first time, and i encounter this error
Where is your AngularJS code? It needs the app name declaring in the modules otherwise it will error as its referencing something that doesnt exist.
var app = angular.module('myApp', []);
i've fixed it.. i had to referenced the angular.min.js file at the top of the page
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template