javascriptのバインディングフレームワーク「angularjs」の学習
どれも使ったことがない
なんかいろいろなところでもう使うのが当たり前的な雰囲気なんですけど
まだ、JQueryでよいかな~って思っていたのでそのままにしていたけどそろそろ重い腰を上げてみる
いろいろ考えてみて
とりあえず以下の機能を調査することにする
要は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で初期化やメソッドを定義できるよう
まとめ
まだ、やりたいことまで行き着いていないので調査続行する。
学習コストが高い場合は別のものにするかも…もう少しやってみるけど複数のフレームワークを使うのは手間がかかるのでとりあえずはこれを調査することにする