この夏、AngularJSを始めよう。Let’s try AngularJS!!
Facebook創業者のザッカーバーグ氏が「HTML5に賭けたのは失敗」と言ったのは今や昔。
現在では既に多くの方がHTML5でのアプリケーション開発を行っています。
弊社でもHTML5を用いたハイブリッドアプリケーションの開発を盛んに行っております。クオリティーの高いHTML5アプリケーションを作るために、週末を利用してJavaScriptフレームワーク「AngularJS」の勉強会を開催しております。今回はAngularJSのご紹介と勉強会で学んでいる内容を少しアウトプットしたいと思います。
AnglarJSってなに?
まず、AngularJSについて簡単にご紹介します。AngularJSとは上記でも記述したように、JavaScriptのMVCフレームワークです。MVCのMはmodel(モデル),Vはview(ビュー),Cはcontroller(コントローラー)を表します。MVCフレームワークであるということは、開発者間での作業分担を明確にすることができる、コンポーネントの再利用性が高まる、保守性が高まるといったメリットを享受することが出来ます。
JavaScriptのフレームワークはたくさんありますが、その中でもAngularJSは実装規約が多くあり、実装者間で大きな差が出ないような設計となっております。つまり大規模開発に有用なフレームワークです。また、Googleが主体となって開発が進められているため、今後もさらに便利になっていくだろうと考えられています。
その他、大きな特徴はDI(依存性の注入)デザインパターンが用いることが出来る点です。この辺りについては不勉強なので、別の機会に詳しくアプトプットしていきたいと思います。
さらに詳しい紹介は下記を参考にしてみてください。
→https://app.codegrid.net/entry/angularjs-1
ディレクティブの使い方
それでは今回の勉強会で学んだことをさらっとご紹介します。
AngularJSにはディレクティブ(directive)とよばれる機能があります。
ディレクティブを用いることで、DOM要素に対して処理を注入することが出来ます。
ng-のついているものは基本的にディレクティブと呼ばれるものです。
今回はサンプルとしてパン屑リストを作ってみました。
実際にソースコードを見てきましょう。
・HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ja" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body ng-controller="indexCtrl"> <ul> <li ng-repeat="breadcrumb in breadcrumbs.getAll()"> <span class="divider">/</span> <ng-switch on="$last"> <span ng-switch-when="true">{{breadcrumb.name}}</span> <span ng-switch-default> <a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a> </span> </ng-switch> </li> </ul> <script type="text/javascript" charset="UTF-8" src="lib/angular-1.3.0-beta.15/angular.js"></script> <script type="text/javascript" charset="UTF-8" src="js/indexCtrl.js"></script> </body> </html> |
2行目のng-app=”myApp”はタグの中がAngularJSのテンプレートを表しています。
7行目のng-controller=”indexCtrl”を用いることで、指定したコントローラと紐付けることが可能になります。
8行目にng-repeat,11行目~16行目にng-switchが登場しており、同時に用いられています。
breadcrumbs.getAll()で下記のJavaScriptファイルで定義されたJSON形式のデータを取得し、
その一つ一つの値をbreadcrumbの中に入れています。
10行目のon=”$last”で最後に出力されるDOM要素に操作を加えることを示しています。
12行目でng-switch-when=”true”つまり、最後のDOM要素であるときの操作を、
13行目でデフォルト時、つまり最後のDOM要素以外の操作を記述しています。
・JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
(function () {'use strict'; angular.module('myApp', []) .controller('indexCtrl', ['$scope', function($scope) { var app = { init : function () { this.models(); }, models : function() { $scope.breadcrumbs = { model : [ {'name':'top', 'path':'#top'}, {'name':'page1', 'path':'#page1'}, {'name':'page2', 'path':'#page2'} ], getAll : function() { return this.model; } }; } }; app.init(); }]); })(); |
これでパン屑リストの出来上がりです！！
なんとなくAnglarJSの機能をご理解頂けましたでしょうか。
まだまだ私自身勉強不足ですが、今後もAngular勉強会の内容を発信していきたいと思います。
谷尾和是
最新記事 by 谷尾和是 (全て見る)
- この夏、AngularJSを始めよう。Let’s try AngularJS!! - 2014年8月5日
- 【iOSアプリ開発】tableviewで背景を設定できるお洒落なアプリ - 2014年4月24日