m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

javascriptのバインディングフレームワーク「angularjs」の学習

どれも使ったことがない

なんかいろいろなところでもう使うのが当たり前的な雰囲気なんですけど
まだ、JQueryでよいかな~って思っていたのでそのままにしていたけどそろそろ重い腰を上げてみる

いろいろ考えてみて

とりあえず以下の機能を調査することにする

  • JQueryとの連携
  • Ajaxのリクエスト
  • DOM制御
  • 複数のDOMを同時に使用可能?
  • フォームをまたがってSubmit可能?

要はJQueryでいままでやっていたことをどこまでできるか?
JQueryはマニュアルが豊富なのですぐに検索ででてくるけどangularjsはマニュアルが英語しかないのでちょっと調査に手間取りそう

ちょっと簡単に調査したもの

基本
<!DOCType html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>AngularJS Sample01</title>
	</head>
	<body ng-app="sample01">
		<div ng-controller="controller01">
			<p>{{hello}}</p>
		</div>
		
		<script src="./js/angular.min.js" type="text/javascript"></script>
		<script src="./js/app01.js"></script>
	</body>
</html>
/**
 * 初期表示データチェック用サンプル
 */
'use strict';
(function() {
	// ng-appのidと紐付け
	var app = angular.module('sample01', []);
	
	// コントローラーのバインド
	app.controller('controller01', ['$scope', function ($scope) {
		$scope.hello = "Hello Angular Test!";
	}]);
	
})();
テキストを入力したら連動してラベルの文字を変更
<!DOCType html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>AngularJS Sample01</title>
	</head>
	<body ng-app="sample02">
		<div ng-controller="controller02">
			<input type="text" ng-model="name" />
			<p>こんにちは {{name}} さん</p>
		</div>
		
		<script src="./js/angular.min.js" type="text/javascript"></script>
		<script src="./js/app02.js"></script>
	</body>
</html>
/**
 * テキストデータを設定するサンプル
 */
'use strict';
(function() {
	// ng-appのidと紐付け
	var app = angular.module('sample02', []);
	
	// コントローラーのバインド
	app.controller('controller02', ['$scope', function ($scope) {
		$scope.name = "ほげほげ";
	}]);
	
})();
inputの項目を変更したら連動して変更
<!DOCType html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>AngularJS Sample01</title>
	</head>
	<body ng-app="sample03">
		<div ng-controller="controller03">
			<div>
				<div>
					回数を入力=><input type="text" ng-model="count1" />
				</div>
				<div>
					チェック=><input type="checkbox" ng-model="check1" ng-true-value="1" ng-false-value="0" />
				</div>
			</div>
			<hr />
			<div>
				<div>
					設定項目確認
				</div>
				<div>
					<p>回数:{{count1}}</p>
				</div>
				<div>
					<p>チェック内容:{{check1}}</p>
				</div>
			</div>
			<hr />
		</div>
		
		<script src="./js/angular.min.js" type="text/javascript"></script>
		<script src="./js/app03.js"></script>
	</body>
</html>
/**
 * 入力項目の設定サンプル
 */
'use strict';
(function() {
	// ng-appのidと紐付け
	var app = angular.module('sample03', []);
	
	// コントローラーのバインド
	app.controller('controller03', ['$scope', function ($scope) {
		
		// 初期化
		$scope.count1 = "0";
		$scope.check1 = "0";
		
	}]);
	
})();

わかったこと

  • ng-appに値を設定してangular.moduleと連動する
  • angular.moduleの結果にcontrollerで初期化やメソッドを定義できるよう

まとめ

まだ、やりたいことまで行き着いていないので調査続行する。
学習コストが高い場合は別のものにするかも…もう少しやってみるけど複数のフレームワークを使うのは手間がかかるのでとりあえずはこれを調査することにする