LT用

What's hot

Viewers also liked

Similar to AngularJSを触ってみた

AngularJSを触ってみた

• 1.
  AngularJSを触ってみた
• 2.
  AngularJSとはAngularJSとは・MVCパターンを採用したJavaScriptのフレームワーク・フルスタック主な用途・データ変更が多く、即座に画面反映したいアプリ・管理画面・ SPA(シングルページアプリケーション)
• 3.
  AngularJSの機能テンプレート– ディレクティブ– AngularJS式– データバインディングMVC– Controller– テンプレートとの関連付け– サービス→ビジネスロジックの分離– 依存性注入→ DI (Dependency Injection )– ルーティング
• 4.
  サンプルコードでjQueryとAngularJSを比較コード例テキストボックスに入力された文字列をHTML要素内に反映する
• 5.
  サンプルコードでjQueryとAngularJSを比較//jQueryによる実装<input type="text" name="hoge"/><div id="target"></div><script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript">$("input[name=hoge]").change(function(){$("#target").html($(this).val());});</script>
• 6.
  サンプルコードでjQueryとAngularJSを比較<script type="text/javascript" src="/js/angular.js"></script><divng-app><input type="text" ng-model="hoge" /><div>{{hoge}}</div></div>・「ng-」で始まるHTMLプロパティがAngularJS独自の「ディレクティブ」というもの・ 「ng-app」を付与した要素内のDOMにAngularJSが適用され、「ng-model」はモデル（データ）を管理します。・{{hoge}}は、「hoge」という名前で保持したモデルを反映します。
• 7.
  今後の動向バージョンは現在1.x系が使われていますが、2.xほぼ別物になるようです2.x系の特徴・ECMAScript6（ES6）の採用・ng-xxx記法を廃止して、記号（[]、()、#）による式やイベント記述
• 8.
  今後の動向バージョンは現在1.x系が使われていますが、2.xほぼ別物になるようです2.x系の特徴・ECMAScript6（ES6）の採用・ng-xxx記法を廃止して、記号（[]、()、#）による式やイベント記述2.x系がリリースされたら再チャレンジしたいです!!