20161125 米田 angular_jsを触ってみた

AngularJSを触ってみた

~グじゃなくて、ギュらしいです～

作成日：2016/11/25

作成者：米田北斗

コンテンツ

はじめに

動くもの

さいごに

1

特徴（入門）

はじめに

対象者– AngularJS って何ですか？また、触った事がない人

– クライアントサイドについての興味のある人

閲覧に際しての注意– 発表者自身も、今回始めてAngularJSに触れたため、以下のことを厳守してご清聴下さい。

有識者の人は温かい目と耳で聞いて下さい。

鋭い眼光を向けないで下さい。

指摘事項は懇親会でそっと伝えてください。

2

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のフレームワークです。

コンテンツ

はじめに

動くもの

さいごに

4

特徴

特徴（入門）

HTMLベースのテンプレート機能

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

ルーティング機能

Ajax通信機能

…上記以外にも、便利な機能、特徴はありますが、本日はこの程度にします。これをきっかけにどんなものか触って、自分で調べて見て下さい。

5

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>

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

双方向データバインディングとは、双方のデータを監視・更新して、常に同期を図ること。

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!!」が表示される


8

リクエストのURLに応じてコントローラーとテンプレートを振り分けること。


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

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 = '通信失敗！';});}

コンテンツ

はじめに

動くもの

さいごに

11

特徴

コンテンツ

はじめに

動くもの

さいごに

12

特徴

参考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

http://dev.classmethod.jp/client-side/javascript/angularjs-1/

http://liruu.com/angularjs/angularjs-note/

http://dev.classmethod.jp/client-side/javascript/angularjs-1/

14

ご清聴ありがとうございました。

Software

20161125 米田 angular_jsを触ってみた