なにやら僕の周りで「AngularJS」が流行っている。
みんなdotinstallみて勉強している。
検索してみると、周囲の会社が結構使い始めている。ていうか、もう使ってる所が多い・・・
もしかしてAngularJSを知らないと遅れているのか？
触ったことが無いと、今どきのプログラマーと言えないのではないか？
・
・・
・・・
一線の開発員をやっている人ってこんな衝動に押しつぶされそうになる事があるようです。
他人事ではなく、僕も間違いなく、そう考えますがねwww
各種情報
本家サイト
dotinstall「AngulatJS入門」
AngularJSはJSのフレームワーク？
AngularJSの説明を色々なサイトで見てみると、「MVCフレームワーク」という説明がある。
MVCは「Model , View , Controller」というObjective-Cの構造体のプログラム構成なのだが、JSのフレームワークって何？ってずっと思ってました。
ドットインストールを見て、それが何となく理解できましたね。
わからない人はまずはdotinstall見てください。
え？プログラムが分からない？そんな人は、まずはプログラムの基本を学んで欲しいんですが、AngularJSを覚える時もどうやらネイティブJS（またはｊQueryの基礎知識）は必要なようです。
基本構成のソース紹介
ドットインストールでも記述されている内容をまとめてみました。
<!DOCTYPE html>
<html lang="js" ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<h2>inputフォーム連動</h2>
<blockquote>
フォームに入力すると、リアルタイムに文字が連動する。<br>
<input type="text" ng-model="name">
<p>上のフォームと連動 {{name}}</p>
<input type="text" value="{{name}}" disabled=true placeholder="上のフォームと連動">
</blockquote>
<h2>計算</h2>
<blockquote>
計算も普通にできる
<p>5 x 3 = {{5*3}}</p>
</blockquote>
<h2>Controller</h2>
<blockquote>
JSに記述されたデータと連動できる
<div ng-controller="mainCtrl">
<h3>リストの個数を取得</h3>
<p>site counts : {{lists.length}}</p>
<h3>リスト連動</h3>
<ul>
<li ng-repeat="list in lists">
{{list.site}} / {{list.domain}}
</li>
</ul>
<h3>filter</h3>
大文字、小文字
<ul>
<li ng-repeat="list in lists">
{{list.site|lowercase}} / {{list.domain|uppercase}}
</li>
</ul>
数値の桁数（小数点の桁数）
<ul>
<li ng-repeat="list in lists">
{{list.number}} / {{list.number| number:4}}
</li>
</ul>
大きな数値のカンマ対応、通貨表示
<ul>
<p>
{{100*1000}} / {{100*1000 | number}} / {{100*1000 | currency}} / {{100*1000 | currency:"¥"}}
</p>
</ul>
日付（フォーマット指定）
<ul>
<p>
{{today | date:"yyyy-MM-dd"}}
</p>
</ul>
<h3>リピートのフィルター</h3>
上位５件の表示
<ul>
<li ng-repeat="list in listsMore | limitTo:5">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
並べ替え
<ul>
<li ng-repeat="list in listsMore | orderBy:'number'">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
並べ替え（逆ソート）
<ul>
<li ng-repeat="list in listsMore | orderBy:'-number'">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
並べ替え&上位３件
<ul>
<li ng-repeat="list in listsMore | orderBy:'number' | limitTo:3">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
文字でフィルター※入力文字で絞込する<br>
<input type="text" ng-model="query">
<ul>
<li ng-repeat="list in listsMore | filter:query">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
ドメインのみをフィルター※入力文字で絞込する<br>
<input type="text" ng-model="query.domain">
<ul>
<li ng-repeat="list in listsMore | filter:query">
{{list.site}} / {{list.domain}} / {{list.number}}
</li>
</ul>
</div>
</blockquote>
</body>
</html>
var mainCtrl = function($scope){
$scope.lists = [
{"site":"Google" , "domain":"google.com" , "number":10} ,
{"site":"Yahoo" , "domain" : "yahoo.com" , "number":20} ,
{"site":"Apple" , "domain" : "apple.com" , "number":30}
];
$scope.listsMore = [
{"site":"Google" , "domain":"google.com" , "number":210} ,
{"site":"Yahoo" , "domain" : "yahoo.com" , "number":20} ,
{"site":"Apple" , "domain" : "apple.com" , "number":230} ,
{"site":"Ideacompo" , "domain":"ideacompo.com" , "number":40} ,
{"site":"Amazon" , "domain" : "amazon.com" , "number":250} ,
{"site":"Twitter" , "domain" : "twitter.com" , "number":60} ,
{"site":"Facebook" , "domain":"facebook.com" , "number":270} ,
{"site":"Line" , "domain" : "mobile.line.me" , "number":80} ,
{"site":"dotinstall" , "domain" : "dotinstall.com" , "number":290} ,
{"site":"github" , "domain":"github.com" , "number":100} ,
{"site":"Redmine" , "domain" : "edmine.jp" , "number":310} ,
{"site":"Linux" , "domain" : "jp.linux.com" , "number":120}
];
$scope.today = new Date();
};
解説
ng-app
冒頭の"ng-app"を忘れないように。
この指定はページ途中でのnamespaceとして利用する事もできるようですが、その説明は以後の記事で行います。
ng-model
inputタグで連動することができるng-model="name"という書き方。
かなりインタラクティブな処理がサクッと作れてしまうので覚えておくと便利でしょう。
ng-controller & ng-repeat
一覧データを表示処理するような場合に有効でしょう。
絞込のフィルター処理を覚えておくと、UIが素敵なサイトを簡単に作れるでしょう。
実行結果のキャプチャ
諸事情により、ページを反映させる事ができないので、実行結果のキャプチャ画像を貼り付けておきます。
是非自分の環境で実行してみてください。
※ちなみに、ローカル環境のfile://ではライブラリの読み込みができないのでWEBサーバで実行してくださいね。
0 件のコメント:
コメントを投稿