1. ホーム
  2. javascript

[解決済み】"angular is not defined "の原因とは?

2022-02-15 14:37:44

質問内容

のビデオチュートリアルを見ています。 egghead.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のビデオシリーズのような多くのオンライン例ではうまくいくのに、私は彼のビデオに非常に密接に従っていると思うので、私は問題があることです。

解決方法を教えてください。

Angularを参照しているタグの後にscriptタグを記述する必要があります。それを head :

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

今の設定だと、Angularがページに読み込まれる前にスクリプトが実行されます。