Angular is undefined

Question

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:

Just to make sure, your angular*.js files are actually found inside a folder called Scripts, right? — blurfus
– blurfus, Commented Aug 13, 2015 at 16:52
Screenshot your apps file structure if seeing George's comment didn't answer you. — IfTrue
– IfTrue, Commented Aug 13, 2015 at 16:54
@GeorgeStocker That's the strangest thing...Could it have anything to do with the fact it's just an empty website folder in Visual Studio? I wouldn't that would have anything to do with it though. — Anonymous
– Anonymous, Commented Aug 13, 2015 at 16:55

Coding Enthusiast · Accepted Answer · 2015-08-13 17:01:22Z

8

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.

answered Aug 13, 2015 at 17:01

Coding Enthusiast

3,9331 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

George Stocker Over a year ago

Winner winner chicken dinner. didn't even see that issue.

Coding Enthusiast Over a year ago

@GeorgeStocker actually your answer led to mine. When you said the cdn works, and he commented saying: every other file loads except that one, I knew it was from the file name or a problem with the tag. Thanks to you too :)

Anonymous Over a year ago

Thanks to both of you for your help!

George Stocker · Accepted Answer · 2015-08-13 17:02:41Z

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>

I changed my angular references to the CDNJS and it works! how come it's loading the App.js file from the Scripts folder but not the angular JS files?
@Anonymous We can't answer that question because we can't see the output of your build. You'd have to share screenshots in your question about the output of your build.
Please include a screenshot of your whole structure; not just that folder. Especially what it looks like after you build it (from Windows Explorer).
@Anonymous I bet I know the problem, if you right click on angular-min.js and look at its properties in Visual Studio, do you have Copy to output directory included? Is it also included as content as property?

Ozan Tabak · Accepted Answer · 2015-08-13 17:01:57Z

0

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>

answered Aug 13, 2015 at 17:01

Ozan Tabak

6723 silver badges9 bronze badges

2 Comments

Coding Enthusiast Over a year ago

this is still not going to work because: check my answer.

Ozan Tabak Over a year ago

true for HTML5 only, otherwise I saw it affect behaviour depending on the browser

RohitGoel · Accepted Answer · 2017-08-29 12:29:13Z

0

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.

answered Aug 29, 2017 at 12:29

RohitGoel

1

Collectives™ on Stack Overflow

Angular is undefined

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Related