ぽんこつエンジニアのブログ

PHP チョット デキル

ドットインストールのAngularJS入門でハマった

夏休みだしAngularでもやるか〜と思ってドットインストールでAngularJS入門したんですが#3「コントローラーを使ってみよう」で動かなくなりました。

dotinstall.com

結論から言うと使っていたバージョンが違うという凡ミス。ドットインストールの方は1.0.1で自分が使っていたのは1.4.4でした。

公式のほうではもうそのバージョンはダウンロード出来なかったのですが、legacyな1.2なら大丈夫だろうと思いそっちに入れ替えたら無事動くようになりました。

https://angularjs.org/

f:id:ichikawa0829:20150815175130p:plain

なにが変わったのか

angularJsについて - QA@IT こちらのQAによるとどうやらAngularJSの1.3.0以降、デフォルトではグローバルに定義されているコントローラーは使えなくなったようですね。

解決策1:$controllerProvider.allowGlobals();
angular.module("ng").config(function($controllerProvider){
    $controllerProvider.allowGlobals();
});
var mainCtrl = function($scope) {

}

スクリプトのどこかでこのようにallowGlobalsを呼び出してあげると行けました。しかし、わざわざ禁止にしたものを許可するのは微妙な気がしますね。少なくとも自分のようなAngularぺーぺーはやめておいたほうがいい気がする。

解決策2:angular.module().contoroller()

1.ng-appの値を設定する。htmlタグに書いたけど実際はもっとスコープ狭めてdivとかに書いたほうがいいぽい。

<html lang="ja" ng-app="myApp">
<!-- ng-appとしていた部分をng-app="myApp"に変更 -->
・
・
・

2.angular.module().contoroller()から設定する

// moduleの第1引数にng-appで指定した値、controllerの第1引数にコントローラ名を指定する
angular.module("myApp", []).controller("mainCtrl", function($scope) {
    $scope.users = [
        
    ];
});

解決策2の方でやるほうがきっとより今風なんだろうな。一回本読もうかな。