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

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

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

3

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

S O W H Y A N G U L A R J S ?

5

Honestly, I just picked one.

6

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

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

9

9

V I E W < D I V >

9

V I E W < D I V >

R O U T E R ( J S )

9

V I E W < D I V >

R O U T E R ( J S )

H T M L

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 )

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 )

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

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

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

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

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

11

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

12

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

12

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.

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

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

Fin

16