![Page 1: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/1.jpg)
J O H N F I S C H E L L I - @ J O H N F I S C H E L L I
A P R A C T I C A L L O O K AT Y O U R F I R S T L A R AV E L / A N G U L A R J S A P P
1
![Page 2: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/2.jpg)
G O A L S F O R T H I S P R E S E N TAT I O N
• Give you the absolute basics on AngularJS
• Show some real life examples of AngularJS (that are hopefully useful)
• Resources to get you started using AngularJS yourselves
• Encouragement. (If I can do it, you can to.)
• Teach myself how to give these kinds of talks.
2
![Page 3: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/3.jpg)
Q U A L I F I C AT I O N S ?
3
![Page 4: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/4.jpg)
B U T S R S LY, Q U A L I F I C AT I O N S ?
• Web Developer for ~7 years
• Using Laravel for ~18 months
• Using AngularJS for ~8 months
• Made lots of messy apps with jQuery
• (P.S. I’m not really qualified, but thanks for listening anyway)
4
![Page 5: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/5.jpg)
S O W H Y A N G U L A R J S ?
5
Honestly, I just picked one.
![Page 6: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/6.jpg)
6
![Page 7: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/7.jpg)
W H E N S H O U L D Y O U U S E A N G U L A R J S ?
• if you've ever said that you've built a client-side application in jQuery
• when you're struggling to keep your app's UI in sync with whats happening with javascript
7
![Page 8: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/8.jpg)
M V W ( M O D E L , V I E W, W H AT E V E R )
• AngularJS has a router, views and controllers — also models!
• wait, models typically mean database/server-side, etc. How does this exist in a client-side app?
• to explain this let's look at an example
8
![Page 9: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/9.jpg)
9
![Page 10: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/10.jpg)
9
![Page 11: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/11.jpg)
9
![Page 12: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/12.jpg)
9
V I E W < D I V >
![Page 13: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/13.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
![Page 14: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/14.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
![Page 15: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/15.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
C O N T R O L L E R ( J S )
![Page 16: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/16.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
C O N T R O L L E R ( J S )
![Page 17: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/17.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
C O N T R O L L E R ( J S )
N A M E
![Page 18: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/18.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
C O N T R O L L E R ( J S )
N A M E
E M A I L
![Page 19: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/19.jpg)
9
V I E W < D I V >
R O U T E R ( J S )
H T M L
C O N T R O L L E R ( J S )
N A M E
E M A I L C O N T R O L L E R ( J S ) !
N A M E E M A I L
![Page 20: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/20.jpg)
M O D E L S S I M P L I F I E D
• In a JS client side app, models tend to be the data that you would post to a server for persistence.
• Models exist inside views (let that sink in).
• Data binding makes getting values to post to the server really easy.
• It also makes outputting the value of a specific model really easy. No more $(“#someID”).val();
10
![Page 21: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/21.jpg)
L E T ’ S L O O K AT T H I S A G A I N !
11
![Page 22: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/22.jpg)
T I M E F O R A R E A L - L I F E E X A M P L E !
12
![Page 23: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/23.jpg)
T I M E F O R A R E A L - L I F E E X A M P L E !
12
![Page 24: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/24.jpg)
PA R A D I G M S H I F T S Y O U M U S T M A K E
13
• the server is no longer the single source of truth to your app
• don't use jQuery with Angular (technically you can)
• jQuery is a crutch that prevents you from doing things the angular way
• don't muck with the DOM outside of angular! it will make life harder.
![Page 25: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/25.jpg)
T I P S T O M A K E Y O U R L I F E E A S I E R
• don't use the built-in router -- use the ui-router, its much more powerful https://github.com/angular-ui/ui-router
• if you must auth users do it outside of the angular world — if you must auth in angular use token-based authorization https://github.com/tappleby/laravel-auth-token
• Angular has these cool extensions people have written - like composer packages - use them!
14
![Page 26: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/26.jpg)
R E S O U R C E S T H AT H E L P E D M E
• Intro to Angular JS: https://www.youtube.com/watch?v=8ILQOFAgaXE
• End to End with AngularJS: https://www.youtube.com/watch?v=hqAyiqUs93c
• Credit Dave Mosher @dmosher
15
![Page 27: A practical look at your first laravel angular js app](https://reader033.vdocuments.us/reader033/viewer/2022052621/55835739d8b42aa3798b4e46/html5/thumbnails/27.jpg)
Fin
16