Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FRONT END JavaScript WITH AngularJS ...

Daniel Wanja
February 28, 2013

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

Daniel Wanja

February 28, 2013
Tweet

More Decks by Daniel Wanja

Other Decks in Programming

Transcript

  1. Me

  2. 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
  3. 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.
  4. 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)
  5. 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
  6. 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
  7. •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
  8. 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
  9. 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
  10. 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