Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0002 ng-controllerを使う

参考にさせて頂いたページ

コントローラーについて | 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を使用している場合

上手く動作しなかったりする模様。

AngularとBrowserifyの微妙すぎる関係 - Qiita

JavaScript - AngularJSモダンプラクティス - Qiita