FRONT END JavaScript WITH AngularJS ...

This are the slides from my AngularJS talk at the Denver Ruby on Rails User Group http://www.meetup.com/DeRailed/events/103389992/. It's a great introduction to AngularJS by example. Find all the examples at https://github.com/danielwanja/AngularJSSamples

Transcript

2. by Daniel Wanja FRONT END JAVASCRIPT WITH ANGULARJS ...
3. Agenda •Me •Front End JavaScript frameworks •AngularJS Overview •AngularJS by Example •AngularJS Internals
4. Me
5. •d@n-so.com •@danielwanja •n-so.com/blog •onrails.org + =
6. Portfolio
7. Pinnacol - online team
8. Portfolio - T3Media
9. My Own Stuff
10. Front End JavaScript frameworks
11. Various ways to do client side javascript with Rails • Classic: Rails UJS • :remote => true • .js.erb • server generates HTML + javascript to update DOM • PJAX/Turbolink • partial/body replace • server generates HTML • Client Side Frameworks • Many libraries, client generates HTML • Rails great as JSON server
12. Front End JavaScript frameworks http://www.infoq.com/research/top-javascript-mvc-frameworks
13. AngularJS Overview
14. What is AngularJS according to google • Superheroic JavaScript MVW Framework • HTML enhanced for web apps! • lets you extend HTML vocabulary for your application • is extraordinarily expressive, readable, and quick to develop.
15. What is AngularJS • 100% client side framework • DOM based HTML generation • Two-way Binding • Model mutation observation • Promise • <3 jQuery DOM manipulation (but doesn’t require it) • Maintainability (dependency injection)
16. Model View Whatever •MVC vs MVVM vs MVP => WTF? •Angular gives you a lot of flexibility to nicely separate presentation logic from business logic and presentation state. https://plus.google.com/+AngularJS/posts/aZNVhj355G2
17. Features •Templating •Data binding •Directives •Services •Dependency injection •Filters •Routing •Testability
18. Directives App and controller ngApp ngController ngInit Model ngModel HTML generation ngInclude ngRepeat ngSwitch Event Handling ngChange ngClick ngDblclick ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup Dynamic urls ngHref ngSrc Input manipulation ngSelected ngReadonly ngChecked ngDisabled ngList ngMultiple Form ngForm ngSubmit HTML Style changes ngClass ngClassEven ngClassOdd ngShow ngHide ngStyle Binding ngBind ngBindHtmlUnsafe ngBindTemplate Miscelleanous ngCloak ngCsp ngNonBindable ngPluralize
19. http://docs.angularjs.org/guide/compiler
20. mvc WITH BINDINGS view service controller event model binds dispatches updates calls calls
21. •Easy to get started with •Little code, big results •Two way data bindings •Bind to base JavaScript Objects (not extending a base class) •Promising extensions (ui bootstraps, •Fully tested Why AngularJS ? according to Daniel
22. My first AngularJS with Rails app http://registre-foncier.com
23. AngularJS by Example https://github.com/danielwanja/AngularJSSamples
24. Click Links for Example preview • 06-partials ◦example1-include.html • 07-http ◦example1-http.html • 08-resource ◦example1-resource.html • 09-rails-resource ◦example1-rails-resource.html • 10-directive ◦example1-ui-bootstrap.html ◦example2-chart.html • 01-ngmodel ◦example1-binding.html ◦example2-multi-view-binding.html ◦example3-two-way-binding.html • 02-ngcontroller ◦example1-controller.html ◦example2-multiple-controllers.html • 03-filter ◦example1-filter.html ◦example2-custom.html • 04-ngrepeat ◦example1-repeat.html ◦example2-repeat.html ◦example3-filter.html ◦example4-selection.html • 05-routes-and-views ◦example1-routes.html
25. 01-ngmodel/example1-binding.html <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div> view binds to model
26. 01-ngmodel/example2-multi-view-binding.html <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> <h1>Hello {{yourName | uppercase}}!</h1> </div> </div> one model, two views
27. AngularJS Under The Hood
28. Resources •angularjs.org •angularjs-seed - https://github.com/angular/angular-seed •angularjs ui - http://angular-ui.github.com •angular-strap - http://mgcrea.github.com/angular-strap •angularjs ui bootstrap - http://angular-ui.github.com/ bootstrap/ •http://yeoman.io/ - http://briantford.com/blog/angular-yeoman.html
29. startup http://docs.angularjs.org/guide/concepts
30. runtime http://docs.angularjs.org/guide/concepts
31. That’s it! Questions?