A practical look at your first laravel angular js app
4 likes2,211 views
This document provides an overview of AngularJS for beginners. It aims to give the basics of AngularJS, show real-life examples, and provide resources to get started. The presentation discusses key AngularJS concepts like MVC structure, models representing data, and the roles of views, controllers, and routers. It emphasizes paradigm shifts from jQuery, such as not directly manipulating the DOM. Tips are given on useful extensions and authorization practices. Overall resources and encouragement are provided to help learn and implement a first AngularJS application.
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