HTML5 ビギナーのための AngularJS

HTML5 ビギナーのための

AngularJS 2014.11.27

About me

!

金井健一 / Kenichi Kanai !!!

@can_i_do_web !

Web先端技術味見部部長

AngularJS Japan User Group

Now On Sale.

Agenda

• About AngularJS

• Data Binding

• Template Engine

• Directive / Filter

• Conclusion

About AngularJS

• for Web Application

• Fullstack

• HTML enhanced

Others

etc…

Trends

About AngularJS• Data Binding

• Template Engine

• Routing

• Ajax Support

• Test

• Security

• DI ( Dependency Injection )

• Service / Directive / Filter

About AngularJS• Data Binding

• Template Engine

• Routing

• Ajax Support

• Test

• Security

• DI ( Dependency Injection )

• Service / Directive / Filter

今日はコレだけ！

Data Binding

コレを

ココに

Data Binding By jQuery <body>

<input type="text" id="someWord">

<p>Hello <span id=“greeting"></span></p>

</body>

$('#someWord').on('keyup', function(event){

var textBoxValue = $(this).val();

$('#greeting').html(textBoxValue);

});

JavaScript

HTML

Data Binding By AngularJS <body>

<input type="text" ng-model=“greeting”>

<p>Hello <span ng-bind=“greeting”></span></p>

</body>

// no code.

JavaScript

HTML

<ul> @for(order <- orders) { <li>@order.title</li> } </ul>

Template Engine

<ul> <% foreach ($this->data as $d): %> <li><%=$d[‘title']%> & <%=$d[‘description']%></li> <% endforeach %> </ul>

<ul> <% writers.each do |writer| %> <li><%= writer %></li> <% end %> </ul> Ruby on RailsPlay Framework

PHP

Template Engine

Template Engine

<ul>

<li ng-repeat=“person in list”>

<p ng-bind=“person”></p>

</li>

</ul>

AngularJS

Template Engine <body>

<input type="text" ng-model=“myModel”>

<p>Hello <span ng-bind=“myModel”></span></p>

</body>

HTML の要素にカスタム属性として定義

※ 一部、カスタム要素でも定義できたりする

HTML

Service / Directive / Filter

• Directive

• AngularJS 流カスタム要素・カスタム属性 ( 最初から70 個くらい用意されている！)

• Filter

• 表示項目の一時的なフィルタリングex）201411271930 -> 2014/11/27 19:30

超ざっくり！


Filter

Directive


<input type=“checkbox” ng-model=“checked”>

<p ng-show=“checked”>こんにちわ</p> <p ng-hide=“checked”>こんばんわ</p>

built-in-Directive


<div ng-init=“model = 123.456”>

<p ng-bind=“model | number: 1”></p>

</div>

Filter

123.5

Browser


それでも足りなければ作りましょう！

超ざっくり！

Web Components

<x-twitter-button>

Web Components

Web Components

Web Components

<x-twitter-button ( type=“tweet” )> default

<x-twitter-button type=“follow”>

<x-twitter-button type=“hashtag”>

<x-twitter-button type=“mention”>

Web Components

<body> <header></header>

<x-user></x-user>

<x-trend></x-trend>

<x-timeline></x-timeline>

<x-recommend-user></x-recommend-user>

<footer></footer> </body>

Web Components<header>

<x-user>

<x-trend><x-timeline>

<x-recommend

-user>

<footer>

Web Components

Web Components

AngularJS でWeb Components の予習ができる！

Conclusion

• Data Binding が超簡単

• Template は HTML 拡張なのでわかりやすい

• Directive っていうカスタム要素・属性

• Filter 便利！

ビギナー向けまとめ

そこから先はまた別の機会に！

Conclusion

AngularJS Japan User Group #ng_jp

わからないことがあれば！

Thank you.

@can_i_do_web

Technology

HTML5 ビギナーのための AngularJS