Simpleweb

AngularJS
for Data Driven Applications

AngularJS for Agile Applications

AngularJS for Agile Applications


Why do we need it?


Why it's awesome


How it works

Building applications

is really fucking hard

The jQuery way™

  • Check all contacts
  • Uncheck all contacts
  • Check single contacts
  • Contact Added
  • Contact Removed

  • Button disabled class
  • Button number checked
  • Button number unchecked
  • Button click event

  • Check all contacts
    • Change checked number
    • Remove class `disabled` to button
    • Bind click event unless bound
  • Uncheck all contacts
    • Change checked number
    • Add class `disabled` to button
    • Unbind click event
  • Check single contacts
    • Change checked number
    • Add / Remove / Keep class on button
    • Bind click event unless bound
  • Contact Added
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  • Contact Removed
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  • Check all contacts
    • Change checked number
    • Remove class `disabled` to button
    • Bind click event unless bound
  • Uncheck all contacts
    • Change checked number
    • Add class `disabled` to button
    • Unbind click event
  • Check single contacts
    • Change checked number
    • Add / Remove / Keep class on button
    • Bind click event unless bound
  • Contact Added
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  • Contact Removed
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  • Check all contacts
    • Change checked number
    • Remove class `disabled` to button
    • Bind click event unless bound
  • Uncheck all contacts
    • Change checked number
    • Add class `disabled` to button
    • Unbind click event
  • Check single contacts
    • Change checked number
    • Add / Remove / Keep class on button
    • Bind click event unless bound
  • Contact Added
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  • Contact Removed
    • Change total number
    • Change checked number
    • Add / Remove / Keep class on button
  Performance* Scalability Size Testable Flexibility
AngularJS Very High Very 36kb Very Good
Ember.js High Extremely 69kb DIY Good
Backbone Baseline Average 6kb DIY Excellent


A Comparison of Angular, Backbone, CanJS and Ember by Sebastian Porto [http://is.gd/mvcperformance](http://is.gd/mvcperformance)
* Based on two-way scoped-binding

Steep Learning Curve


Think different.

AngularJS for Agile Applications


Why do we need it?


Why it's awesome


How it works

AngularJS is what HTML would have been, had it been designed for building web-apps.

AngularJS is what HTML will be, hurry the fuck up w3c

Web Components

W3C Draft

Templates

Shadow DOM

Mutation Observers

AngularJS for Agile Applications


Why do we need it?


Why it's awesome


How it works

Demo Time!

Working With APIs


  angular.module("myApp").factory "Cat", ($resource) ->
    $resource "/pets/:pet_type/:pet_id",
      "pet_type": "cats"
      "pet_id": "@pet_id"



  angular.module("myApp").controller "CatCtrl", ($scope, Cat) ->

    # Get all cats
    $scope.cats = Cat.index()

    # Get cat by ID
    arthur = Cat.get(42)

    # New Cat
    jeff = Cat.new( { name: "Jeff", type: "Tabby" } )

    # Update
    jeff.type = "Octocat"
    jeff.save()


{
	loading: false
	user: undefined
	addressBook: undefined
	addressBooks: undefined
	contacts: [
		{ sname: "Reid", fname: "Benjamin", checked: true, ...}
		{ sname: "Redman", fname: "Rob", checked: true, ...}
		{ sname: "Procter", fname: "Paul", checked: true, ...}
		{ sname: "Prior", fname: "Cheryl", checked: true  ...}
		{ sname: "Procter", fname: "Paul", checked: true, ...}
		{ sname: "Panay", fname: "Mark", checked: true  ...}
		...
	]
	complete: false
	showHelp: false
}

THE END

Adam Butler / @labfoo

github.com/adambutler

Made with Slides.com