Question

我正在关注egghead.io上的视频教程，但在创建工厂时尝试按照他的示例（请参阅视频here）我一直得到“角度未定义”参考错误但我包括角度脚本

这是我的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){

    }

我已经阅读了一些类似的帖子（here）并且请纠正我，如果我错了，但我认为它与Boot strapping有关，我尝试使用angular.bootstrap(document, ['Data']);手动引导但是如果没有成功，仍会得到同样的错误。

但我想知道的是，为什么这适用于网上的许多例子，比如egghead视频系列，但我有问题，因为我相信我已经非常密切地关注他的视频。它是近期版本中角度的变化吗？

Answer 1

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

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

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

Answer 2

我和deke有同样的问题。我忘了包含最重要的脚本：angular.js :)

Data.Map

Answer 3

您尚未为angular js

放置脚本标记

您可以使用cdn或下载项目的angularjs然后引用它

之后你必须在你的案例main.js中添加你自己的java脚本

应该做

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

3 个答案: