Slide 1

Slide 1 text

ANGULAR NEW ROUTER

Slide 2

Slide 2 text

TOMOYUKI KASHIRO Twitter : @Tkashiro Github : @kashiro Freelance Web Front-end Developer

Slide 3

Slide 3 text

http://goo.gl/MpnOiM

Slide 4

Slide 4 text

BASIC USAGE

Slide 5

Slide 5 text

DIRECTORY There is no way to change components (html and javascript) path in the settings.

Slide 6

Slide 6 text

CONTROLLER app.js

Slide 7

Slide 7 text

COMPONENTS component/home/home.js

Slide 8

Slide 8 text

COMPONENTS component/home/home.html

Slide 9

Slide 9 text

HTML index.html ng-link=“home” : href=“/“ ng-link=“detail({id: ‘hoge’})” : href=“/detail/hoge“

Slide 10

Slide 10 text

NG-LINK

Slide 11

Slide 11 text

RESULT

Slide 12

Slide 12 text

SIBLING USAGE

Slide 13

Slide 13 text

SETTING Navigation Area Contents Area

Slide 14

Slide 14 text

/index.html Home Nav Home Contents

Slide 15

Slide 15 text

/detail/index.html Detail Nav Detail Contents

Slide 16

Slide 16 text

RESULT LEFT
 CONTENT RIGHT
 CONTENT

Slide 17

Slide 17 text

RESULT

Slide 18

Slide 18 text

HTML index.html

Slide 19

Slide 19 text

CONTROLLER

Slide 20

Slide 20 text

RESULT

Slide 21

Slide 21 text

OTHER USAGE

Slide 22

Slide 22 text

LIFE CYCLE HOOK You can hook routing life cycle ( e.g. activate / deactivate ) • Activate : useful to check login status • Deactivate : useful to check input validation

Slide 23

Slide 23 text

SUMMARY

Slide 24

Slide 24 text

• still have some inconvenient things. • new router is still developing… • It will be useful to controlling routing. i think. • Let’s contribute :)