“角度未定义”的原因是什么

我正在关注视频教程蛋头io但是，当他创建工厂时试图效法他的榜样时（请参阅视频这里）我不断获得" Angular未定义"参考错误，但我包括了角脚本

这是我的HTML页面：

<!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>

这是我JavaScript文件" 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){

    }

我读过一些类似的帖子（这里），如果我错了，请纠正我，但我认为这与自举有关angular.bootstrap(document, ['Data']);但是没有成功，仍然会遇到同样的错误。

但是我想知道的是，为什么这适用于在线上有这么多示例，例如Egghead视频系列，但是我有问题，因为我相信我非常仔细地遵循了他的视频。最近版本的角度变化吗？

答案

您必须将脚本标签放在引用角度的标签之后。将其移出head：

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

您现在设置它的方式，您的脚本在页面上加载Angular之前运行。

来自: stackoverflow.com

答案#

答案