Angular.js for beginners

Presentation for Angular.js workshop 17.08.2014

Transcript

1. Angular.js Angular.js for beginners
2. You need 2 things: • Workshop files https://github.com/basiam/angular-beginners https://github.com/basiam/angular-beginners/archive/master.zip • Any text editor, for example SublimeText http://www.sublimetext.com/
3. Me? https://twitter.com/basiamadej http://github.com/basiam
4. Resources • Angular.js https://angularjs.org/ • TwitterBootstrap http://getbootstrap.com/ • AngularUI http://angular-ui.github.io/bootstrap/
5. JavaScript • programming language • most commonly used as part of web browsers • allows client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed source: http://pl.wikipedia.org/wiki/JavaScript
6. jQuery vs vanilla JavaScript // jQuery $.post('//example.com', { username: username }, function (data) { // code }); // Vanilla var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function (data) { // code } httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpRequest.open('POST', url); httpRequest.send('username=' + encodeURIComponent(username)); source: https://gist.github.com/liamcurry/2597326
7. About Angular.js • JavaScript framework • for Single Page Applications • developed by Google
8. Cool things about Angular • directives • two-way data bindings • Model-View-Controller • modules • jQLite • history
9. Directive “At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.” Cool way to extend HTML easily by simply adding attributes, elements or comments. source: https://docs.angularjs.org/
10. Basic direcitves • ngApp • ngModel • ngBind • ngIf • ngRepeat • ……. • …….
11. Two-Way Data Binding Automatic synchronization of data between the model and view components source: https://docs.angularjs.org/
12. ngApp, ngModel, ngBind • ngApp • ngModel • ngBind
13. ngBind or {{ }} FOUC Flash of unstyled content extra html tags
14. Workshop
15. Angular already included
16. Part 0 1. Open tasks/part0/index.html 2. Add missing code to enable angular on this page 3. Display the value of text input in 'greeting' header
17. ngSrc • src vs ngSrc
18. ngInit, ngRepeat • ngInit • ngRepeat
19. Filters • filter using ngModel • lowercase, uppercase, date, currency, orderBy
20. Part 1 1. Open tasks/part1/index.html 2. Add at least one superhero, then display all of the 3. Enable filtering superheros based on 'search' input
21. expand ngInit? • expand ngInit ?
22. Views and Controllers source: “AngularJS in 60 Minutes” by Dan Wahlin
23. ngController
24. Controllers
25. Part2 1. Open tasks/part2/superheros_controller.js 2. Open tasks/part2/index.html 3. Add missing code to display list of superheros 4. Add more superheros to SuperherosController 5. Display information about superpowers 6. Use form to add more superheros
26. ngSubmit, ngClick, ngIf • ngSubmit • ngIf • ngClick
27. Module • container • to keep code clear • to keep code separated • to easily include all need parts
28. Part3 - tasks/part3/superheros_app.js
29. Part3 - tasks/part3/superheros_controllers.js
30. How needs jQuery? • UI Bootstrap http://angular-ui.github.io/bootstrap/ • jQLite https://docs.angularjs.org/api/ng/function/angular.element
31. Part3 1. Open tasks/part3/index.html 2. Add 'ui.bootstrap' to superheroApp 3. Make sure we only display image when hero.image is present 4. Run 'showBigImage' on click
32. Routes (basic)
33. Part4 1. Open tasks/part4/index.html 2. Angular-route.js is missing 3. Make it work for catwoman!
34. Learn more: • https://docs.angularjs.org/ • https://github.com/jmcunningham/AngularJS-Learning • https://egghead.io/ • http://angular.codeschool.com/ • “AngularJS in 60 Minutes” by Dan Wahlin https://www.youtube.com/watch?v=i9MHigUZKEM