Tweet
Tweet

Slide 1

Slide 1 text

AngularͰ࡞Δ ϞόΠϧΞϓϦ ng-fukuoka Angular Meetup #1
 2017/06/25

Slide 2

Slide 2 text

ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨεί • ϑϩϯτΤϯυେ޷͖
 https://github.com/puku0x

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

։ൃதͷϓϩμΫτ

Slide 5

Slide 5 text

എܠ • ৽͍͠ΞϓϦ࡞Ζ͏ • AngularJS → Angular (2.xҎ߱)

Slide 6

Slide 6 text

Angular

Slide 7

Slide 7 text

Angular 4.x • Google੡ͷϑϨʔϜϫʔΫ • CLI׬උͰ։ൃޮ཰˕ • AngularJSͱ͸ผ෺

Slide 8

Slide 8 text

Angularͷಛ௃ • ϑϧελοΫ • ޮ཰తͳมߋݕ஌ • AoTίϯύΠϧɺSSR ౳

Slide 9

Slide 9 text

https://angular.io

Slide 10

Slide 10 text

Angular͸ϞόΠϧ
 ʹ΋࢖͑Δͧʂ

Slide 11

Slide 11 text

ϞόΠϧͷUIͲ͏͢Δʁ

Slide 12

Slide 12 text

Onsen UI 2

Slide 13

Slide 13 text

Onsen UI 2 • Web ComponentsͰ࣮૷ • ϞόΠϧ࠷దԽ͞ΕͨUIϥΠϒϥϦ • ࠃ࢈ˍ೔ຊޠυΩϡϝϯτ༗

Slide 14

Slide 14 text

ରԠϑϨʔϜϫʔΫ • Angular / React / VueʹରԠ • ΋ͪΖΜVanilla JSͰ΋ॻ͚Δʂ

Slide 15

Slide 15 text

ࣗಈελΠϧมߋͷྫ https://ja.onsen.io/samples/

Slide 16

Slide 16 text

νϡʔτϦΞϧ http://tutorial.onsen.io/

Slide 17

Slide 17 text

Ionic

Slide 18

Slide 18 text

Ionic 3 • Angular ComponentͰ࣮૷ • ౰વAngularͷΈରԠ • ೔ຊޠυΩϡϝϯτͳ͠

Slide 19

Slide 19 text

ը໘αϯϓϧ http://blog.ionic.io/

Slide 20

Slide 20 text

։ൃ؀ڥ

Slide 21

Slide 21 text

։ൃ؀ڥͷߏங • Angular CLI • ࣗྗWebpack • Ionic CLI

Slide 22

Slide 22 text

Angular CLIΛ࢖͏৔߹ • PhoneGap/CordovaͰ৽͍͠
 ϓϩδΣΫτΛ࡞੒ • Angular CLIͰ্ॻ͖ • ngx-onsenui Λ૊ΈࠐΉ

Slide 23

Slide 23 text

ngx-onsenui import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { OnsenModule } from 'ngx-onsenui'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, OnsenModule], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { } 0OTFO.PEVMF ͷΠϯϙʔτͱ εΩʔϚͷઃఆ

Slide 24

Slide 24 text

ৄࡉ͸ˣࢀর http://qiita.com/puku0x/items/f12e23aa15a36f439e79

Slide 25

Slide 25 text

WebpackͰϏϧυ • npm + Webpack + PhoneGap/Cordova https://github.com/puku0x/angular-onsenui2-webpack2/tree/no-angular-cli /src /www Ϗϧυ มߋݕ஌ มߋݕ஌ .html .ts .scss ϩʔμͷઃఆ͸ng ejectͨ͠ޙͷwebpack.config.js ࢀߟ

Slide 26

Slide 26 text

Ionic CLI • $ npm i -g ionic • $ ionic start ϓϩδΣΫτ໊ blank • $ ionic serve https://ionicframework.com/docs/cli/

Slide 27

Slide 27 text

࣮ࡍͷΞϓϦ͸
 ͲΜͳײ͡ʁ

Slide 28

Slide 28 text

ϞόΠϧిࢠΧϧςʢࢼ࡞඼ʣ

Slide 29

Slide 29 text

ϞόΠϧిࢠΧϧςʢࢼ࡞඼ʣ

Slide 30

Slide 30 text

·ͱΊ • AngularͰϞόΠϧΞϓϦΛ࡞ΔͳΒ • Onsen UI • Ionic • PWA༻͸ Angular Mobile Toolkit ※υΩϡϝϯτ͕ࢮΜͰΔͷͰ஫ҙ

Slide 31

Slide 31 text

Λ࢖ͬͯΈ·͠ΐ͏ʂ