AngularJSとは - Code Log

jQueryはあくまでもDOM操作をサポートするライブラリであり、アプリケーション規模が大きくなった際の問題を解決する術を持つわけではない。

ブラウザ依存問題を解決するために、Adobe FlexやMicrosoft SilverlightなどのRich Internet Applicationと呼ばれるRIAプラットフォームが登場した。
しかし、結局はプラグイン扶養でブラウザネイティブに動作するJavaScriptが生き残った。

AugularJSの読み方は「アンギュラージェイエス」という。
Google所属のMisko HeveryとAdam Abronsによって開発がスタートした。

ダウンロードはこちら
https://angularjs.org/

AngularJSで変数の定義

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.js"></script>
</head>
<body>

<div ng-init="variable=42" />
<div>
{{variable}}
</div>
</body>
</html>

AngularJSで繰り返し(for)と分岐(if)

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.js"></script>
</head>
<body>
<div ng-init="enableMessage=true"/>
<div ng-if="enableMessage">
Hello!
</div>
<div ng-init="items = ['Hoge','Fuga', 'Foo', 'Baa']"></div>
<ul>
<li ng-repeat="item in items">
  {{item}}
</li>
</ul>
</body>
</html>

双方向データバインディングとは

JavaScriptがオブジェクトとして保持するデータとHTMLとして画面に表示される内容が双方向で自動的に連携する機能のこと。

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.js"></script>
</head>
<body>
<input type="text" ng-model="message">
<div>
  {{message}}
</div>

</body>
</html>