I need to make a one page app without any additional files like app.js or controller.js
I created the example below, but I get the error:
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js">
var myАpp = angular.module("myАpp", []);
myАpp.controller("firstController", function($scope){
$scope.test = "test-to-test";
});
</script>
</head>
<body ng-app = "myApp">
<div ng-controller = "firstController">
{{test}}
</div>
</body>
</html>
So, is it possible to have only one file index.html with Angular and still have a controller inside?
You need to have the controller and module inside the <script> tag
<div ng-app="myАpp">
<div ng-controller="firstController">
<h1>{{test}}</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app =
angular.module('myАpp', []).controller('firstController', function($scope){
$scope.test = "test-to-test";
});
</script>
Related
I am trying to run a local webpage with AngularJS with dynamically driven controllers. I'd like a URL variable to drive which particular javascript file is loaded with data to drive my page.
HTML File
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
</script>
<script>
var url = new URL(window.location.href);
var t_var= url.searchParams.get("t_var");
var x = document.createElement('script');
x.src = t_var +'.js';
document.getElementsByTagName("head")[0].appendChild(x);
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>
AngularJS controller
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
I have been able to get this to work if I include the below tag in the HTML file.
<script src="sub1.js"></script>
I keep receiving an error that a controller with this name is not referenced.
In principle what you are doing here should be fine. See below.
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>
If you run that you should see 'sub1' in the output.
So, if you are receiving the error saying that your controller isn't registered then almost certainly the problem is you aren't loading the JavaScript file that contains your controller registration. Make sure the script that contains the app.controller... line is included through a <script> element at some point after loading angular and registering the module.
(Remember the SO Snippet and CodePen etc will implicitly include the JavaScript for convenience, in real code we need to do it ourselves).
In fact, if this is just a quick local app maybe you can just include it in the same script element as the module registration, like so:
<html>
<head >
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script>
var app = angular.module("myApp", []);
app.controller("Ctrl1", function($scope) {
$scope.sub1Variable = 'sub1'
});
</script>
</head>
<body ng-app='myApp' ng-controller='Ctrl1'>
{{sub1Variable}}
</body>
</html>
I created a basic angular js module where I am passing the module and the controller message in a separate script file. The issue I am facing is it does not print the message defined in the called function. This seems to me might be an issue with the ng-app defined.
Here is the code :
module.html
<!doctype HTML>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src = "D:\Educational\angularJS code\script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
</body>
</html>
And here is the called script.
script.js
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
The only thing that gets printed in the format is {{message}} and NOT the actual message "Angular JS".
Any suggestions would be of great help.
Since you have your script.js in the same folder just include it simply by
<script src="script.js"></script>
make sure you have internet on your computer since you are using a CDN
Note: please check your console by pressing ctrl+j or f12 to see if there are any errors
You can also try putting your code into the markup itself for now and check if the code works fine.
<script>
var myApp = angular.module("myModule",[]);
var myController = function($scope){
$scope.message = "Angular JS";
}
myApp.controller("myController", myController);
<script>
Code:
<!DOCTYPE html>
<html>
<head>
<!-- angular -->
<script src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainController">
<p>{{ title }}</p>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="timelineInfo.js"></script>
</body>
</html>
All my files are in the same folder because I was having a problem doing src="js/...".
I get the error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…0%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8080%2Fangular.min.js%3A20%3A42
I don't exactly understand what the website was suggesting. I'm using the angular.min.js in my index directory because linking it to the http file was giving me issues. All I'm trying to do is run a simple app so I can build from there but even that is giving me issues.
(I am running from a local machine)
Thanks!!
---------------------------------OTHER FILES----------------------
app.js:
var app = angular.module("timelineApp", []);
MainController.js:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
The problem is that in your html you have app module referenced in ng-app. And in your app.js you have module name as timelineApp.
You need to sync them.
Either update your app.js
from
var app = angular.module("timelineApp", []);
to
var app = angular.module("app", []);
Or update your markup from
<body ng-app="app">
to
<body ng-app="timelineApp">
ng-app value in your html code should have the same as the angular module in your javascript.
For example in you case it should be following:-
<ng-app="timelineApp"> // in your html code
or following:-
var app=angular.module('app',[]); // in your javascript
Also, if you still face the error after that too, then you can one of my answers on the same here
The error you are getting refers to the fact that your application is not bootstrapped correctly. Hence Angular's compiler does not understand the directives it encounters; in this case, that would be ng-controller
It's important that you understand what's happening.
var app = angular.module("timelineApp, []")
and subsequently
<body ng-app="app">
ng-app should really be timelineApp since that is what you set the name of your angular module to.
The code above "bootstraps" your application. Once you application is bootstrapped, Angular's compiler will go through the page's markup. When it encounters ng-app directive, it will look at its value timelineApp and know that it is registered as an angular application.
This also help it understand that you have a controller registered on the app:
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'this is a test';
}]);
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'm trying to learn Angular and attempting to write my first controller outside of a web-based tutorial. I keep getting the error in the title in the JS console and can't figure out what's going on. The link takes me to a page referencing the need to include ngRoute, which I've done according to the API. Surely I'm missing something but I can't see what it is. Any help would be greatly appreciated, thanks!
index.html
<DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Angular Project</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="FirstController">
Did the controller load?
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})
Your issue is that you forgot to invoke the iife which registers module and controller.
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})();//<-- here
Link (in the error) talks about ngRoute as a hint only for one of the reasons your module might not have been available/instantiated when angular ng-app directive tried to bootstrap it. But in your case it does not even exists due to your failure to invoke the anonymous function as IIFE.