Deep dive into AngularJs for Beginners
•
5 likes•5,239 views
Are you willing to start using AngularJs? Then try out this presentation to understand the basics. This is an introduction level presentation of AngularJs and was first presented in "Front End Developers Apeldoorn" meetup in Jexia offices based on Apeldoorn, Netherlands. Video of the speech: https://www.youtube.com/watch?v=vSbnPxoz74k
More Related Content
What's hot
What's hot (20)
Similar to Deep dive into AngularJs for Beginners
Similar to Deep dive into AngularJs for Beginners (20)
Recently uploaded
Recently uploaded (20)
Deep dive into AngularJs for Beginners
- 1. ANGULARJS DEEP DIVE INTO FOR BEGINNERS
- 2. VASSILIS PITSOUNIS FRONT END DEVELOPER @ JEXIA IN INDUSTRY FROM 2000 - WORKED AS WEB & APPS DEVELOPER IN SEVERAL START UPS AND COS GITHUB.COM/VAPITS @VAPITS AUTHOR FOLLOW
- 3. LET’S START var myApp = angular.module(‘myApp’,[]);
- 4. FRAMEWORK, NOT LIBRARY THERE ARE NO READY TO CALL FUNCTIONS HTML AS IT SHOULD BE ANGULAR IS HERE TO GIVE PURPOSE TO THE DOM angularjs.org
- 5. DEEP DIVE INTO ANGULARJS WHY SHOULD I USE IT? ▸ Bootstrapping ▸ Templates ▸ 2-way data binding ▸ Module based ▸ Routing ▸ Directives ▸ Unit Test ▸ HUGE Community
- 6. DEEP DIVE INTO ANGULARJS DOES CHUCK APPROVES? + SAVES YOU TIME! + LOT’S OF DEVS + JOBS OPPORTUNITIES (WE ARE HIRING!!) + GOOGLE WILL BE THERE
- 7. ANGULARJS VS REACTJS VS EMBERJS VS BACKBONEJS SOURCE: GOOGLE TRENDS
- 9. MODEL VIEW CONTROLLER OUR ENTIRE MODEL CAN BE CONTAINED IN A SINGLE JAVASCRIPT OBJECT. var name = ‘Joe’;
- 10. MODEL VIEW CONTROLLER OUR ENTIRE MODEL CAN BE CONTAINED IN A SINGLE JAVASCRIPT OBJECT. UPGRADED HTML WITH REFERENCES TO MODEL <label>Name:</label> <input ng-model=“name”/> <h2>{{name}}</h2> <button ng-click=“saveName()”> Save </button> var name = ‘Joe’;
- 11. MODEL VIEW CONTROLLER OUR ENTIRE MODEL CAN BE CONTAINED IN A SINGLE JAVASCRIPT OBJECT. var name = ‘Joe’; function myCtrl( $scope ) { $scope.name = ‘Joe’; $scope.saveName = function() { alert( $scope.name ); }; } UPGRADED HTML WITH REFERENCES TO MODEL JS CODE THAT POPULATES THE VIEW AND REACTS WITH CHANGES IN IT <label>Name:</label> <input ng-model=“name”/> <h2>{{name}}</h2> <button ng-click=“saveName()”> Save </button>
- 12. A GRAPH ALWAYS HELPS
- 13. DIVE #2 BEST OF
- 14. YOU CAN EASILY ADD A TWO WAY BINDING TO THE MODEL BY JUST: DEEP DIVE INTO ANGULARJS BEST OF ▸ Two Way Binding ▸ Templates ▸ Dependency Injections ▸ Directives ▸ Filters
- 15. TEMPLATES AS EASY AS THE HTML… DEEP DIVE INTO ANGULARJS BEST OF ▸ Two Way Binding ▸ Templates ▸ Dependency Injections ▸ Directives ▸ Filters NGRPEAT IS AN AMAZING DIRECTIVE OF ANGULARJS. I BET YOU WILL LOVE IT!
- 16. DEPENDENCY INJECTIONS… PIECE OF CAKE DEEP DIVE INTO ANGULARJS BEST OF ▸ Two Way Binding ▸ Templates ▸ Dependency Injections ▸ Directives ▸ Filters
- 17. DIRECTIVES, HARD AT THE BEGINNING BUT A MUST! DEEP DIVE INTO ANGULARJS BEST OF ▸ Two Way Binding ▸ Templates ▸ Dependency Injections ▸ Directives ▸ Filters Codefordirective Directive in template Browser result
- 18. DEEP DIVE INTO ANGULARJS BEST OF ▸ Two Way Binding ▸ Templates ▸ Dependency Injections ▸ Directives ▸ Filters
- 20. DEEP DIVE INTO ANGULARJS IF YOU WANT PERFORMANCE JUST DON’T ▸ Watchers (Multiple two-way binders) ▸ $scope.$watch ▸ Fat controllers ▸ jQuery ▸ Complicated functions in expressions (templates).
- 21. DEEP DIVE INTO ANGULARJS THREE SIMPLE RULES FOR SPEED ▸ Use one-way binding ▸ Use Service for data & http requests ▸ The more directives, the better.
- 22. DEEP DIVE INTO ANGULARJS THREE SIMPLE RULES FOR SPEED ▸ Use one-way binding ▸ Use Service for data & http requests ▸ The more directives, the better.
- 23. DEEP DIVE INTO ANGULARJS THREE SIMPLE RULES FOR SPEED ▸ Use one-way binding ▸ Use Service for data & http requests ▸ The more directives, the better.
- 24. DEEP DIVE INTO ANGULARJS ▸ Use one-way binding ▸ Use Service for data & http requests ▸ The more directives, the better. WE WILL SPEAK FURTHER FOR DIRECTIVES ON A NEXT PRESENTATION. YES THEY ARE CHALLENGING ENOUGH TO HAVE THEIR OWN PRESENTATION THREE SIMPLE RULES FOR SPEED
- 25. IS IT EASY TO LEARN?
- 26. DEEP DIVE INTO ANGULARJS DOCUMENTATION ▸ https://docs.angularjs.org/api ▸ angularjs.org
- 27. GITHUB.COM/VAPITS @VAPITS FOLLOW, CONTACT & FIND THE PRESENTATION & EXAMPLES IN MY GITHUB & LINKEDIN PAGE NL.LINKEDIN.COM/IN/VAPITS