QA@IT

angularJsについて

5075 PV

初めまして。
angularJsについて勉強を今日始めました。
controllerの部分を例に習ってやってみると何も表示されません。何がどう違うか全くわかりません。
何処が悪いのでしょうか。

実行ファイル

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script>
    var loopCtrl = function($scope) {
        $scope.week = [
            {"jp":"月","en":"Monday"},
            {"jp":"火","en":"Tuesday"},
            {"jp":"水","en":"Wednesday"},
            {"jp":"木","en":"Thursday"},
            {"jp":"金","en":"Friday"},
            {"jp":"土","en":"Saturday"},
            {"jp":"日","en":"Sunday"}
        ];
    }
</script>


<div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
</div>
</html>

実行した結果
{{week.length}} days

firebugのコンソール部分のエラー
Error: [ng:areq] http://errors.angularjs.org/1.3.0-rc.2/ng/areq?p0=hoge&p1=not%20a%20function%2C%20got%20undefined M/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:6:414 Fb@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:20:1 gb@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:20:164 te/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:72:274 K/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:55:168 q@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:7:381 K@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:55:38 g@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:49:491 g@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:50:1 g@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:50:1 X/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:49:96 hc/d/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:18:157 De/this.$get</k.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:120:325 De/this.$get</k.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:121:100 hc/d/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:18:115 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:36:206 hc/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:18:97 hc@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:18:325 xd@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:17:163 @https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:239:453 a@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:159:4 Xe/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js:32:218
...);return function(){b&&c.apply(a,arguments)}}()}}]}function oa(b,a){if("__define...

全くわかりません。
どなたかこのエラーはどこがわるいのか教えて頂けますでしょうか。

回答

グローバルなコントローラーがデフォでは動かなくなったようですね。

次のように $controllerProvider.allowGlobals(); を呼ぶか、

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script>
    angular.module("ng").config(function($controllerProvider){
        $controllerProvider.allowGlobals();
    });
    var loopCtrl = function($scope) {
        $scope.week = [
            {"jp":"月","en":"Monday"},
            {"jp":"火","en":"Tuesday"},
            {"jp":"水","en":"Wednesday"},
            {"jp":"木","en":"Thursday"},
            {"jp":"金","en":"Friday"},
            {"jp":"土","en":"Saturday"},
            {"jp":"日","en":"Sunday"}
        ];
    }
</script>
<div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
</div>
</html>

次のようにグローバルなコントローラーを使わない書き方にすると動くようです。

<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script>
    angular.module("app", [])
        .controller("loopCtrl", function($scope) {
            $scope.week = [
                {"jp":"月","en":"Monday"},
                {"jp":"火","en":"Tuesday"},
                {"jp":"水","en":"Wednesday"},
                {"jp":"木","en":"Thursday"},
                {"jp":"金","en":"Friday"},
                {"jp":"土","en":"Saturday"},
                {"jp":"日","en":"Sunday"}
            ];
        });
</script>
<div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
</div>
</html>
編集 履歴 (0)

1.3.0の変更によるものです。
1.2.1なら動きますので、急ぎなら1.2.1をお使いください。

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
    var loopCtrl = function($scope) {
        $scope.week = [
            {"jp":"月","en":"Monday"},
            {"jp":"火","en":"Tuesday"},
            {"jp":"水","en":"Wednesday"},
            {"jp":"木","en":"Thursday"},
            {"jp":"金","en":"Friday"},
            {"jp":"土","en":"Saturday"},
            {"jp":"日","en":"Sunday"}
        ];
    }
</script>


<div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
</div>
</html>

変更内容はこのあたりを見てください、と似たような質問に回答としてあがってます。
(ちょっと時間無くて見れてません、ごめんなさい)

https://github.com/angular/angular.js/issues/8296

https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-1

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。