Angular#Kanazawa

Angularでつくる Webアプリケーション

Kenichi Kanai

@can_i_do_web

AngularJS Japan User Group 管理人Web先端技術味見部部長

AngularJS Japan User Group #ng_jp

facebook.com/ajimibu

twitter.com/ajimibu #ajimibu

HTML5 Experts.jp #html5exp

Basic

つくってみた

Plugin

Tools

Angular2

Agenda

https://angularjs.org/

Google Trends

Features

Fullstack

HTML enhanced

Concepts

Two way data binding

Template Engine

Ajax Support

Routing

Test

Security

得意なこと

CRUD系のアプリケーション

管理画面・マイページ

ハイブリッドアプリケーション

苦手なこと

モバイル向けアプリケーション※

ゲーム等のグラフィックやエフェクト

いわゆるWebサイト

※ 改善はされてきています

一番最初の Angular

built-in directive

DOM 操作 (一部)

ng-bind

ng-bind-html

ng-repeat

ng-show / hide / if

ng-switch /

ng-switch-when

a

textarea

select /

ng-options

form

input[type=“xxx”]

Event

ng-click

ng-dblclick

ng-change

ng-checked

ng-mousedown

ng-mouseenter

ng-mouseleave

ng-mouseover

ng-mouseup

ng-submit

Form Validation

required ( = ng-required)

min / max ( = ng-min / ng-max)

ng-minlength

ng-maxlength

ng-pattern

ng-true-value

ng-false-value

Form Validation

form[name].input[name].$valid

form[name].input[name].$invalid

form[name].input[name].$error.required

form[name].input[name].$error.max

childForm[name].$error.minlength

form[name].childForm[name].$valid

Form Validation

check box email number radio text url text

area select

required ◯ ○ ○ ○ ○ ○

min ○

max ○

ng-minlength ○ ○ ○ ○ ○

ng-maxlength ○ ○ ○ ○ ○

ng-pattern ○ ○

Filter

currency

date

filter

json

limitTo

lowercase

number

orderBy

uppercase

Filter

ng core - function

ng core - function

angular.bind

angular.bootstrap

angular.copy

angular.element

angular.equals

angular.extend

angular.forEach

angular.fromJson

angular.identity

angular.injector

angular.isArray

angular.isDate

angular.isDefined

angular.isElement

angular.isFunction

angular.isNumber

angular.isObject

angular.isString

angular.isUndefined

angular.lowercase

angular.merge

angular.module

angular.noop

angular.reloadWithDebugInfo

angular.toJson

angular.uppercase

Model View Controller

Model

データ

ビジネスロジック

View

Template -> HTML

Controller

Scope 初期化

イベントの受け渡し

MVC - before

MVC - after

Service

Service

factory

service

provider

constant

value

Custom Directive

Web Components

Custom Elements

Shadow DOM

Templates

HTML Imports

Web Components

https://html5experts.jp/1000ch/11142/　　

Custom Directive

Custom Element

Custom Attribute

From Class Name (CSS)

一番最初の Custom Directive

Custom Directive

Component

Routing

Routing

ngRoute

AngularUI Router

Component Router

http://angular-ui.github.io/ui-router/site/#/api/ui.router

https://github.com/angular/router

基礎おわり

Plugin

https://angular-ui.github.io/

http://ngmodules.org/

https://nodejs.org/en/

http://gruntjs.com/

http://gulpjs.com/

http://bower.io/

http://yeoman.io/

https://github.com/broccolijs/broccoli

http://brunch.io/

つくってみた

つくってみた

yeoman でテンプレート作成

grunt でサーバ起動

about Angular2

Component ベース

新しい構文

Universal JavaScript

Angular2 Demo

migration to Angular2

Why “ng-“

“ng” sounds like “angular”

“ng-“ は HTML5 の構文的に NG!

data-ng-repeat で OK!

SEO

基本無理です...

MVWって？

Model

View

Whatever (?)

MVC でも MVVM でも何でもいいからコード書こうぜ！

Angular1 のサポート期間は？

みんなが Angular2 になるまで（！？）

Enjoy Angular!

Thank you!

@can_i_do_web

Angular#Kanazawa

Technology

Transcript of Angular#Kanazawa