インソースマーケティングデザイン
2014.07.08 システム
めくるめくJavaScriptライブラリの世界 ～AngularJS
こんにちは、システムエンジニアの福田です。
今まではどちらかというと小技でしたが、今回は大技とも言える「AngularJS」を紹介したいと思います。
AngularJSとは・・・Googleと有志により開発しているオープンソースのJavaScript用MVCフレームワークで、動的Webアプリケーションの開発を容易にしてくれるスグレモノです。
ちなみに、モバイルアプリ開発プラットフォームである「Monaca」でもAngularJSが使われています。
https://angularjs.org/
※MIT License
使い方の一例としては
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js”></script>
<script src=”./app.js”></script>
</head>
<body ng-app>
<div ng-controller=”outString”>
<p>{{hello}}</p>
</div>
</body>
</html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js”></script>
<script src=”./app.js”></script>
</head>
<body ng-app>
<div ng-controller=”outString”>
<p>{{hello}}</p>
</div>
</body>
</html>
app.js
function outString($scope){
$scope.hello = “Hello Angular!”;
};
$scope.hello = “Hello Angular!”;
};
index.htmlにアクセスすると・・・
Hello Angular!
「じゃあコレを導入してなにかメリットはあるの？」との声が聞こえてきそうですが・・・今までjQueryでチマチマと書いていた処理を、AngularJSであればサクッとこなすことが可能な場合があります。
例えば・・・外部のＡＰＩを叩いて出力されたＪＳＯＮデータを見栄え良く出力したいとき等々、JavaScriptでグチャグチャなコードになってしまったら、導入を考えてみてはいかがでしょう？
