<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../angular/angular-1.6.7/angular.js"/>
<script src="../angular/angular-1.6.7/angular-route.min.js"/>
<!--script type="text/javascript" src="../modules/familyTree.js"/>
<script type="text/javascript" src="../controllers/mainController.js"/ -->
<script type="text/javascript">
var test= angular.module("myTest", []);
test.controller("main", ["$scope",function ($scope) {
$scope.headline = "Its Started";
}]);
</script>
</head>
<body ng-app="myTest">
<div ng-controller="main">
<h1>{{headline}}</h1>
{{1+2}}
</div>
</body>
</html>
Wrote this code could not figure out whats wrong with it.
Please help, Continuously getting the error.
Thanks in advance.
angular.js:116 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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.
http://errors.angularjs.org/1.6.7/$injector/nomod?p0=myApp
at file:///D:/src/main/resources/templates/angular/angular-1.6.7/angular.js:116:12
at file:///D:/src/main/resources/templates/angular/angular-1.6.7/angular.js:2303:17
at ensure (file:///D:/src/main/resources/templates/angular/angular-1.6.7/angular.js:2224:38)
You need to close the script tags for all the references,
Change
From
<script src="../angular/angular-1.6.7/angular.js"/>
<script src="../angular/angular-1.6.7/angular-route.min.js"/>
To
<script src="../angular/angular-1.6.7/angular.js"></script>
<script src="../angular/angular-1.6.7/angular-route.min.js"></script>
DEMO
var test= angular.module("myTest", []);
test.controller("main", ["$scope",function ($scope) {
$scope.headline = "Its Started";
}]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myTest">
<div ng-controller="main">
<h1>{{headline}}</h1>
{{1+2}}
</div>
</body>
</html>
Related
I know this question has been asked many times and I've had a look at many of the answers and none seem
Here is the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9
here is script.js:
var app= angular.module('myApp',[]);
app.controller('tictactoe',['$scope', function ($scope) {
$scope.label='hello world';
console.log($scope.label);
}]);
Here is index.html:
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Tic Tac Toe Game</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="tictactoe">
<label id="label">{{label}}</label>
</body>
</html>
I’m sure the answer is straight forward, but I can't for the life of me see which it is.
Here i try to Angular setup in html page for that i wrote simple code as Below
MyApp.js
/// <reference path="angular.js" />
var app = angular.module('MyApp', [])
debugger;
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "This is MyApp....";
})
Master.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app="MyApp">
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
Here why my msg is not Loading This is MyApp....
ng-app inject wrong place. Not <head ng-app="MyApp">, Inject html or body or div tag as per your web application need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
the problem is with your angular script, is not loaded, check your path, you can use the CDN also :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/angular/angular-route.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code
var app = angular.module('testApp', ['ngRoute']);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' 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.
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=testApp
if code:
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code:
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
The error is the same!!
Test version address: http://zadanie.salesdep.by/
Code is working fine.Please check the library reference path
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-controller="testCtrl">
{{Message}}
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
</script>
I'm trying to make my AngularJS HelloWorld work but I can't. My code is the following:
<!DOCTYPE html>
<html np-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
</body>
The output:
{{mensagem}}
I searched about similar questions here in SO but found only questions with a missing ng-app atribute.
I tried opening my file both in Firefox and Chrome and I get the same error. Logging both angular and app reveal that they are both defined.
I don't know what I'm doing wrong.
In your HTML tag, you've misspelled ng-app, which is probably the main reason it's not working. You should also place the include for Angular down at the end of the body, which ensures the app and controller elements are defined before the script runs:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</body>
</html>