Presentation from Angular.js workshop for MozDev

1. ● Workshop
https://github.com/basiam/angular-beginners
https://github.com/basiam/angular-beginners/archive/master.zip
● Text editor
http://www.sublimetext.com/

2. Angular.js
Angular.js for beginners

3. Me?
https://twitter.com/basiamadej
http://github.com/basiam

4. Resources
● Angular.js https://angularjs.org/
● Twitter Bootstrap 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

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));

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
● history
● jQLite

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.

10. Basic direcitves
● ngApp
● ngModel
● ngBind
● ngIf
● ngRepeat
● …….
● …….

11. Two-Way Data Binding
Automatic synchronization of data between the model and view components

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

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. UI Bootstrap
http://angular-ui.github.io/bootstrap/

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. Resources
● “AngularJS in 60 Minutes” by Dan Wahlin
● https://docs.angularjs.org/
● http://pl.wikipedia.org/wiki/JavaScript
● https://gist.github.com/liamcurry/2597326
●