So I'm learning angular and I have a very basic html with a js script and I keep getting 'angular is undefined' on line 1 of App.js. I have all of the angular scripts and my script in a Scripts folder. What am I missing?
index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="Scripts/angular-min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/App.js"></script>
</body>
</html>
App.js
var appMainModule = angular.module('appMain', []);
appMainModule.controller("homePageViewModel", function($scope, $http, $location){
$scope.Heading = "This is the heading";
$scope.SayHello = function () {
alert('Hello');
}
});
Folder structure in VS:
your script is wrongly named it should be this
<script src="Scripts/angular.min.js"></script>
instead of this:
<script src="Scripts/angular-min.js"></script>
Look at your file name and look at your script name.
Given that I've copied your code into a codepen; and the only changes I've made are to reference the CDNJS versions of Angular and Angular Route; and I'm not seeing an issue.
Your issue lies elsewhere.
Specifically, if you're building this project, your output folders need the same relative path to Scripts. In other words, your directory structure expects the following to be true:
- index.html
|
- Scripts
|
- app.js
- angular-min.js
- angular-route.js
Another issue could be that you don't have Copy to output Directory=true or don't have the angular-min.js set as Content (something to be copied to the output folder).
Here's the codepen changes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
you need to set type="text/javascript" in your angular script definitions.
try
<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
I faced the same issue about angular being undefined. In my code type="text/javascript" attribute was missing. After I added this attribute, it worked fine. Try this also if the solutions above do not work.
Related
I using very simple code. I seem to be missing something that does run the Angularjs code.
here is my html code:
<html>
<head>
<title></title>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Here is app.js code:
var app = angular.module('myAppApp',[]);
app.controller('exempleCtrl', function($scope) {
$scope.name = 'World';
});
I'm new to Angularjs. So I could be missing something big here.
The issue, as pointed out in the comments, is that you did not include your Javascript code in the HTML file. So assuming you called it something like app.js and is in the same directory as the HTML file, then you need to include it as follows:
<html>
<head>
<title></title>
<!-- You should also add reference to angular (use desired version - example here is 1.2.4) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- Here including the app.js-->
<script src="app.js"></script>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Give it a try and let us know if this works.
I just started to learn angular, and I`ve created a basic app with angular-material. But I have an error:
[$injector:modulerr]
My html:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="assets/javascripts/app.js"></script>
</body>
</html>
In app.js I have this:
var app = angular.module('angularTest', ['ngMaterial', 'ngRoute'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
If I remove script tag with app.js, and replace with <script> var app = ...</script> then it works. :(
Does anyone have a solution?
Thanks a lot!
Please check your code, maybe share a plnkr link of it breaking.
There were a few things that were missing in your code snippet (including a closing head, a body start, the ng-app tag and more), which I'm assuming is in the ... section
I created a plnkr with what you had mentioned, and it seems to be working correctly:
<html>
<head></head>
<body ng-app="angularTest">
{{1+2}}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
This correctly loads, and shows 3 in the browser when opened. Plnkr link
You must initialize the angular app on your html page. I can see in the snippets that the app is not intialized. Here is the code which will help you -:
<html ng-app="angularTest">
<body>...</body>
</html>
I'm very new to Angularjs. I have managed to install eclipse plugin for Angularjs and started a simple code. When i have the below code, the expressions are evaluating properly. I have visited similar problems reported in stackoverflow ad have tried all suggestions, but in my case, i just evaluate {{ 7 + 8}} which is straight forward. Please any help here is appreciated. Thanks.
<html ng-app>
As soon as i change to poing ng-app to my module, the page breaks and expressions are not evaluating.
<html ng-app = "corpo"> --> Fails
myapp.html
<html ng-app>
<head>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<title>Corp</title>
</head>
<body>
<div>
<p>{{ 7 + 19 }}</p>
</div>
</body>
</html>
corp.js
var corp = angular.module('corpo', []);
Also i keep getting undefined javascript file and i have disabled the validation under properties.
Put corpo below of angular library
Like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>
Its failing because you have injected corp.js before angular.min.js
corp.js after angular.min.js, it will start working
var corp = angular.module('corpo', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="corpo">
<head>
<title>Corp</title>
</head>
<body>
<div>
<p>{{ 7 + 19 }}</p>
</div>
</body>
</html>
change this
<src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>
I think your "corp.js" is not in the right path.
working plunker demo
Post your application directory structure. I am sure the problem is with that.
I am having a problem with Angular JS receiving an error
Uncaught Error: [$injector:modulerr]....
this my javascript and html code..
what's wrong there?
(function(){
var app = angular.module('store', []);
app.controller('tes', function($scope) {
});
})();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<script type="text/javascript" src="../angular.min.js"></script>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
</body>
</html>
Well you have your script tag hanging outside head tag and before body tag.
Fixed it as follows;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular</title>
</head>
<body ng-app = 'store'>
<div ng-controller="tes">
<h1>{{ 4 + 4 }}</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
working link : http://plnkr.co/edit/tLt22vN1mkGDWTNabq3J?p=preview
I just tested your code by copy paste in a new project and added correct reference to the angular js file and it worked fine for me. Do you have any other module which is trying to load? click on the error link and you might be able to figure out the issue. I think you are missing the correct reference to the angular.min.js file
Most likely explanations
You haven't loaded the file where you define the module 'store', the first code block, in the html
There's an error in your module code so that angular doesn't interpret it correctly
Also fix the ng-app attribute:
<body ng-app="store">
Please remove (function(){ from top and remove })(); from bottom.
it's not a jquery, so please remove it.
And please check ../angular.min.js is on proper place or not.
So heres my simple angular app. When I run the html file on its own via the browser, the variable name is displayed saying "nothing". However when I integrate it into django by making a dummy view that just calls a template (see views below), no variable name is shown. The only differece is when using django I load the JS files via {% static %} . The html output is the exact same for both except the django version doesn't output the variable name. I have broken the problem down to its simplest form and can't seem to understand what's happening here.
JS files are 100% loaded in django version. Chrome console shows no errors. I originally developed a simple app in angular to integrate with my django app but I can't do anything if this simple issue stands in my way.
views.py
def home_tester(request):
return render(request, 'angular/base.html')
HTML
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
</body>
</html>
app.js
var app = angular.module('ZeTasty',[]);
gridfilter.js
app.controller("GridFilter", function($scope){
$scope.name = 'nothing';
});
you need to add {%verbatim%} and {%endverbatim%} tag
django and angular use the same {{ and }} markers.
by hinting django with {%verbatim%}, he will ignore the {{ and }}. this will allow you to combine angular with django templates
example:
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->
{%verbatim%}
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
{%endverbatim%}
</body>
</html>