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.
Related
<!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>
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>
I am new in angularjs, so i try this script in Index.html like this:
<!DOCTYPE html>
<html lang="en" ng-app="DEMO">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.HelloMessage = "Hello Pejman";
}
</script>
</body>
</html>
but when i run this, it show {{HelloMessage}} instead of Hello Pejman , what is the problem?
EDIT : this is the tutorial:
You did not bootstrap angular module, that is why your code doesnt work. You must call ng-app in any HTML tag to notify Angular start in there. So all of the sub tags under the tag Angular declared will be able to use directives, scope, controller etc.
Please check here to understand how to create controller and use it : https://docs.angularjs.org/guide/controller
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="angular.min.js"></script>
</head>
<body>
<h1 ng-app="demo" ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script type="text/javascript">
var app = angular.module('demo', []);
app.controller('HelloWorldCtrl', function($scope) {
$scope.HelloMessage = "Hello Pejman";
});
</script>
</body>
</html>
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>
Using Angular v1.3.13. Version1 does not work in Chrome:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Error:
Argument 'HelloWorldCtrl' is not a function, got undefined
Version2 works fine:
<!doctype html>
<html lang="en" ng-app=myApp>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('HelloWorldCtrl',
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
});
</script>
</body>
</html>
Version1 is the original code from a Pluralsight course. In the course the code works fine. Did I make an error or does this no longer work due to changes in AngularJs?
From angularV1.3 to use functions defined on window scope as controllers we need call alloGlobals method defined on $controllerProvider.
module.config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
documentation
changelog
Yes. Using global functions is not supported anymore. But it's been quite a long time: since 1.3.0