参考にさせて頂いたページ
AngularJSでモジュールを定義するには? - Build Insider
今回やること
AngularJS1.x その0002 ng-controllerを使う - MOTOMICHI WORKS BLOG
の記事おいて非推奨な記述とされていた記述のまま、
AngularJS1.x その0003 ng-clickディレクティブ - MOTOMICHI WORKS BLOG
の記事を書いてしまっていたので、推奨される記述に則って書き直す。
ng-app.jsに記述する内容
例として以下の通り。
// myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('SampleCtrl', function($scope) { // デフォルトの値を設定 $scope.msg = 'こんにちは、誰かさん!'; // ng-click="onclick"なので、onclickメソッドを定義 $scope.onclick = function() { $scope.msg = 'こんにちは、' + $scope.name + 'さん!'; }; });
angularオブジェクトが持っている、moduleメソッドを実行して、モジュールを作成する。
第一引数は必須で、作成するモジュール名。
第二引数も必須で、今回は空の配列を渡している。
第三引数は省略可能なので、今回は省略している。
index.htmlのng-app属性の値として、モジュール名を設定する
以下のように記述した。
<html ng-app="myApp">
モジュール作成の際に第一引数がmyAppだったので、ng-app="myApp"
とする。
index.htmlのうちSampleCtrlに対応する部分
前回記述したままで、以下の通り。
<div ng-controller="SampleCtrl"> <input type="text" ng-model="name" /> <button ng-click="onclick()">送信</button> <div>{{msg}}</div> </div>