Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular New Router
Search
Tomoyuki Kashiro
April 09, 2015
Programming
2
170
Angular New Router
Tomoyuki Kashiro
April 09, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
Swift Testingのモチベを上げたい
stoticdev
2
150
自力でTTSモデルを作った話
zgock999
0
110
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
2
500
Formの複雑さに立ち向かう
bmthd
1
940
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
CloudNativePGを布教したい
nnaka2992
0
120
TCAを用いたAmebaのリアーキテクチャ
dazy
0
210
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
Datadog Workflow Automation で圧倒的価値提供
showwin
1
280
SwiftUI Viewの責務分離
elmetal
PRO
2
280
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Unsuck your backbone
ammeep
669
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Faster Mobile Websites
deanohume
306
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Gamification - CAS2011
davidbonilla
80
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
A designer walks into a library…
pauljervisheath
205
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Transcript
ANGULAR NEW ROUTER
TOMOYUKI KASHIRO Twitter : @Tkashiro Github : @kashiro Freelance Web
Front-end Developer
http://goo.gl/MpnOiM
BASIC USAGE
DIRECTORY There is no way to change components (html and
javascript) path in the settings.
CONTROLLER app.js
COMPONENTS component/home/home.js
COMPONENTS component/home/home.html
HTML index.html ng-link=“home” : href=“/“ ng-link=“detail({id: ‘hoge’})” : href=“/detail/hoge“
NG-LINK
RESULT
SIBLING USAGE
SETTING Navigation Area Contents Area
/index.html Home Nav Home Contents
/detail/index.html Detail Nav Detail Contents
RESULT LEFT CONTENT RIGHT CONTENT
RESULT
HTML index.html
CONTROLLER
RESULT
OTHER USAGE
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
SUMMARY
• still have some inconvenient things. • new router is
still developing… • It will be useful to controlling routing. i think. • Let’s contribute :)