What is the cause for "angular is not defined"

Question

I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script

This is my html page:

<!DOCTYPE html>
<html>
    <head>
    <title>Prototype</title>
    <link rel="stylesheet" type="text/css" href="foundation.min.css">
    <script type="text/javascript" src="main.js"></script>
    </head>
    <body>

    <div data-ng-app="">

        <div data-ng-controller="FirstController">
            <input type="text" data-ng-model="data.message">
            <h1>{{ data.message }}</h1>
        </div>



        <div data-ng-controller="SecondController">
            <input type="text" data-ng-model="data.message">
            <h1>{{ data.message }}</h1>
        </div>


    </div>
    <script type="text/javascript" src="angular.min.js"></script>
    </body>
</html>

and this is my javascript file "main.js":

//Services
    // step 1 create an app                             
    var myApp = angular.module('Data', []).
    // tep 2 create factory
                // Service name, function
    myApp.factory('Data', function(){
        return { message: "I'm Data from a Service" }
    });



//Controllers
    function FirstController($scope, Data){
        $scope.data = Data;
    }

    function SecondController($scope){

    }

I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.

But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?

Joseph Silber · Accepted Answer · 2013-08-04T15:34:32.843

103

You have to put your script tag after the one that references Angular. Move it out of the head:

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>

The way you've set it up now, your script runs before Angular is loaded on the page.

edited Aug 04 '13 at 15:34

answered Aug 04 '13 at 15:28

Joseph Silber

214,931
59
362
292

Thank you, a silly mistake on my part much appreciated , I will except your answer once it allows me to – jonnie Aug 04 '13 at 15:30
3

I ran into the same problem. It is caused by egghead in one video having the angular.min.js defined at the bottom of the page, and then in another video it is moved to the header in top the where main.js is defined. – homaxto Jan 21 '14 at 10:54
1

Mine was a very silly mistake. I did not have link to the `angular.js` file on the html file. I had the same error. – Deke Jan 01 '16 at 16:07

score 0 · Answer 2 · answered Jul 09 '16 at 07:14

0

You have not placed the script tags for angular js

you can do so by using cdn or downloading the angularjs for your project and then referencing it

after this you have to add your own java script in your case main.js

that should do

answered Jul 09 '16 at 07:14

Anshul Bisht

29
4

2

You didn't try doing this, did you? – Tibrogargan Jul 09 '16 at 07:29
sorry dude my bad i missed out on the last – Anshul Bisht Jul 10 '16 at 03:13

score 0 · Answer 3 · answered Aug 07 '16 at 19:51

0

I had the same problem as deke. I forgot to include the most important script: angular.js :)

<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

answered Aug 07 '16 at 19:51

JohnyWind

55
6

What is the cause for "angular is not defined"

3 Answers3

Linked