A practical look at your first laravel angular js app

1. 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

2. 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

3. Q U A L I F I C AT I O N S ?
3

4. 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

5. S O W H Y A N G U L A R J S ?
5
Honestly, I just picked one.

6. 6

7. 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

8. 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

9. 9

10. 9

11. 9

12. 9
V I E W
< D I V >

13. 9
V I E W
< D I V >
R O U T E R
( J S )

14. 9
V I E W
< D I V >
R O U T E R
( J S )
H T M L

15. 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 )

16. 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 )

17. 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

18. 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

19. 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

20. 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

21. L E T ’ S L O O K AT T H I S A G A I N !
11

22. T I M E F O R A R E A L - L I F E E X A M P L E !
12

23. T I M E F O R A R E A L - L I F E E X A M P L E !
12

24. 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.

25. 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

26. 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

27. Fin
16