javascript - 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?

score 100 · Accepted Answer

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.

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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>

javascript - What is the cause for "angular is not defined"

3 回答 3

Related

Reference