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

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

8. DIVE #1
M.V.C

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

19. DEEP DIVE
PERFORMANCE

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