Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20161125 米田 angular_jsを触ってみた

535 views

Published on

2016年11月25日 メディアフォース社内LT大会資料の代理アップロード
presenter by yoneda

Published in: Software
  • Be the first to comment

  • Be the first to like this

20161125 米田 angular_jsを触ってみた

  1. 1. AngularJSを触ってみた ~グじゃなくて、ギュらしいです~ 作成日:2016/11/25 作成者:米田北斗
  2. 2. コンテンツ はじめに 動くもの さいごに 1 特徴(入門)
  3. 3. はじめに  対象者 – AngularJS って何ですか?また、触った事がない人 – クライアントサイドについての興味のある人  閲覧に際しての注意 – 発表者自身も、今回始めてAngularJSに触れたため、以下のこと を厳守してご清聴下さい。  有識者の人は温かい目と耳で聞いて下さい。  鋭い眼光を向けないで下さい。  指摘事項は懇親会でそっと伝えてください。 2
  4. 4. AngularJSって何ですか? 3 クライアントサイドの有名フレームワーク。結構あります。 詳しく知りたい人は、以下参照。 http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81% E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82 %92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9 ずばり、JavaScriptのフレームワークです。
  5. 5. コンテンツ はじめに 動くもの さいごに 4 特徴
  6. 6. 特徴(入門)  HTMLベースのテンプレート機能  双方向データバインディング  ルーティング機能  Ajax通信機能 …上記以外にも、便利な機能、特徴はありますが、本日はこの程度に します。これをきっかけにどんなものか触って、自分で調べて見て下 さい。 5
  7. 7. HTMLベースのテンプレート機能 HTMLをそのままテンプレートとして使用し、 DOMの直接指定を行わない為、コード量が少なく 可読性、保守性が高くなりやすい。 6 <!doctype html> <html ng-app> ︙ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> ︙ <p>{{myModel}}</p> <div><input type="text" ng-model="myModel"></div>
  8. 8. 双方向データバインディング 双方向データバインディングとは、双方のデータ を監視・更新して、常に同期を図ること。 7 <!doctype html> <html ng-app> ︙ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> ︙ <p>{{myModel}}</p> <div><input type="text" ng-model="myModel"></div> TEXTボックスに入力と同時に 「Hellow!!」が表示される
  9. 9. ルーティング機能 8 リクエストのURLに応じてコントローラーとテン プレートを振り分けること。
  10. 10. ルーティング機能 9 angular.module('myApp', [ 'ngRoute' ]) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeController' }) .when('/contents', { templateUrl: 'views/contents.html', controller: 'ContentsController' }) .when('/tags', { templateUrl: 'views/tags.html', controller: 'TagsController' }) .otherwise({ redirectTo: '/' }); }]); ︙ <ul> <li><a ng-href="#/home">ホーム</a></li> <li><a ng-href="#/contents">記事を読む</a></li> <li><a ng-href="#/tags">関連タグを表示</a></li> </ul> <!-- コンテンツの埋め込み先--> <div ng-view></div> ︙ sampCtrl.js samp.html
  11. 11. Ajax通信機能 10 jQuery等で非同期通信を行う場合に冗長になりが ちなコードをシンプルに記述することが可能。 angular.module('myApp', []) .controller('MyController', ['$scope', '$http', function($scope, $http) { $scope.onclick = function() { // 1 サーバーに対してリクエストを送信 $http.get( ‘/XXXXX/XXXXX,{ params: { name: $scope.name } } ) // 2 成功時の処理 .success(function(data, status, headers, config){ $scope.result = data; }) // 3 失敗時の処理 .error(function(data, status, headers, config){ $scope.result = '通信失敗!'; }); }
  12. 12. コンテンツ はじめに 動くもの さいごに 11 特徴
  13. 13. コンテンツ はじめに 動くもの さいごに 12 特徴
  14. 14. 参考URL  AngularJS入門その1 – http://dev.classmethod.jp/client-side/javascript/angularjs-1/  アズ勉 – http://liruu.com/angularjs/angularjs-note/  AngularJS入門 (全12回) - プログラミングなら ドットインストール – http://dotinstall.com/lessons/basic_angularjs 13
  15. 15. 14 ご清聴ありがとうございました。

×