参考にさせて頂いたページ
コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS TIPS - Build Insider
Controllerの役割
参考にさせて頂いたページによると
コントローラーは下記のようなことをするのに使用されます。
・ $scopeオブジェクトの初期状態をセットアップします。
・ $scopeオブジェクトの振る舞いを追加します。
とのこと。
Controllerを定義する
ng-app.jsの作成とその記述内容(非推奨な記述)
例として以下の通りですが、推奨されない記述なのだそうです。
var SampleCtrl = function($scope) { $scope.greeting = 'Hola!'; }
$scopeオブジェクトのプロパティとして、greetingを持たせることで、HTML側では{{greeting}}として出力できる。
ng-app.jsの作成とその記述内容(非推される記述)
例として以下の通りですが、DI(Dependency Injection)というソフトウェアデザインパターンについて理解する必要がありそうなので後日。
var myApp = angular.module('myApp',[]); myApp.controller('SampleCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
DIについてはまだわからないけど、上記の推奨される記述については、
AngularJSでモジュールを定義するには? - Build Insider
を読むとわかる。
index.htmlの作成とその記述内容
例として以下の通り。
<div ng-controller="SampleCtrl"> {{ greeting }} </div>
ng-controller属性の値として、ng-app.jsの中で定義した関数名SampleCtrlを設定した。
ng-app.jsを読み込む
当たり前の事ですが、一応。
index.htmlの中で、ng-app.jsを読み込む。
browserifyを使用している場合
上手く動作しなかったりする模様。