angularjs dev setup

NOTE: Assumes nodejs / npm installed

Use http://yeoman.io/ for app scaffolding (yo), build/preview/test (grunt) and manage dependencies (bower)

sudo npm install -g yo            # grunt / bower are dependencies of yo

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt serve                       # preview your app
grunt                             # build the application for deployment

For testing, karma is recommended: https://github.com/vojtajina/karma/

sudo npm install -g karma

Adding items to your project

yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService

NOTE: The controller will be named whatever you specify + 'Ctrl', so running 'yo angular:controller About' will create the AboutCtrl controller.

A quick overview of yo/grunt/bower and usage: https://github.com/yeoman/yeoman/wiki/Getting-Started

Main things to edit are:

• app/scripts/
• app/scripts/controllers/
• app/scripts/directives/
• app/scripts/filters/
• app/scripts/services/
• app/styles
• app/views

Routing

One gotcha is defining routes using $routeProvider. Url's in the document are defined as

<a href='#/path/to/route'>Clicky</a>

Where as the url is defined in the $routeProvider config as

function routeConfig($routeProvider) { $routeProvider. when('/path/to/route', { controller: MyController, templateUrl: 'template.html' })

...

notice this mismatch between the link (pre-ceeding '#') and the url (no '#')

https://github.com/angular-ui/ui-router Provides a way to nest views which seems a lot more powerful then the native routing.

TLS / Http CONNECT handling for proxies

Some brief notes on behaviour.

General Theory
RFC for upgrading HTTP to TLS (Specifically section 5.2)
  http://www.ietf.org/rfc/rfc2817.txt
IEFT draft spec
  http://tools.ietf.org/html/draft-luotonen-web-proxy-tunneling-01

Basic steps (Using sockets / threads):
1) received 'CONNECT host:port HTTP/1.1
2) Open socket to host:port
3) If successful send back a 'HTTP/1.1 Connection Established\n\n" response
4) connect streams of client / and terminal host:port (pass bytes freely between client / server)

Todo:

• Using SocketChannels / Selectors for non-blocking I/O
• Testing
• Performance
• Unit-testing

Application / Domain specific
nodejs impl and discussion:
  https://groups.google.com/forum/#!topic/nodejs/KDAW_xEwTEg
nodejs and connect:
  https://groups.google.com/forum/#!search/http$20connect/nodejs/MGeOheQQF28/T2VmEjjbn-0J

backbone / node / restify

Models

Use Backbone.Model.extend to define a model. Specify properties to define behaviour. (http://backbonetutorials.com/what-is-a-model/)

• initialize: - constructor. What to call when this model is instantiated
• defaults: an object containing default values for properties associated with the model
• validate: a function that accepts the array of attributes to update. If this function returns a string validation will fail.
• xxx : function(...) - where xxx is a function. Any arbitrary function can be added to model (public)
• set / get attributes, using method on instantiated model (can be set through construction)
• 'id' attribute - used to reference key on object. makes choice between a POST (if missing) and a PUT if present
• urlRoot attribute (the api root of the server)
• .save() - a method that will commit data to db, response handle by object passed to 2nd arg ({success:fn(), })
• .fetch() - a method that will retrieve data from server using GET
• .destroy() - a method to delete data from server using DELETE
• .toJSON() - a method to return all attributes of model

Bind events to attributes, by using the implicit 'on' member:

this.on("change:name", function(model){ 

  var name = model.get("name"); 

}); 

'change' by itself listens to all events of the model.

Catalog of events; http://backbonejs.org/#Events-catalog

Watch for generic problems

this.bind("error", function (model, error) {

  alert(error);

});

Collections

An ordered set of Backbone models, defined using Backbone.Collection.extend. 

Assuming there is a Model defined [i.e. var Foo = Backbone.Model.extend({...}) ]

var coll = Backbone.Collection.extend({ model: Foo }); 

Then add instances of the model to the collection (can be done in the constructor, or using add method etc)

coll.add( new Foo() );

Views

Use Backbone.View.extend to define a view.

• initialize: View constructor. Called on instantation of View.
• 'el' property. The HTML element the view is bound to. Any events fired must be in this div. Can set with jQuery dom element selector {el: $('#foo') } etc.
• events: a property that defines backbone events. The can only be attached to children of the specified 'el'.

Load templates using underscore and update the view:

initialize function(){

  var template = _.template( $("#search_template").html(), {} ); 

  this.$el.html( template ); 

} 

// bind events using the 'events' property of the view, reference 

events: { "click input[type=button]": "doSearch" }, 

doSearch: function( event ){ event.currentTarget alert( "Search for " + $("#search_input").val() ); }

Routers

Use Backbone.Router.extend to define a router. They are used to handle url routing / history. Routes interpret anything after the '#' in the URL e.g. (http://host.com/foo/#/my/location

• routes: a property define any of the routes. These are matched in order
• '*actions' matches anything after the # - these are called splats
• '/foo/:id' will match this path, and pass variable 'id' to the function registered in .on('route:foo') - these are called params
• '/foo/:param/*splat' can combine params and splats, though splats always go last as they match all
• bookmarkable URLs, use Backbone.history.start();
• 
  

Register route handlers with 'on' method

router.on('route:defaultRoute', function(actions) {});

Underscore.js

Supports basic HTML templates, with variable replacement

e.g. <div id="foo"><label><%= label_text %></label></div>

can be rendered by _.template( $("#foo").html(), {label_text : "My Label"});

backbone.js and node.js (using express/jade) notes

run express to generate default express project, then run 'npm install' to download dependencies.

Download following libraries and put in public/javscripts dir

• backbone.js - http://backbonejs.org/ 
• underscore.js - http://underscorejs.org/ 
• jquery.js - http://jquery.com/download/
• json2.js - https://raw.github.com/douglascrockford/JSON-js/master/json2.js

Add these references to your public/views/layout.jade file

    script(src='/javascripts/json2.js', type='text/javascript')
    script(src='/javascripts/jquery-1.10.2.js', type='text/javascript')
    script(src='/javascripts/underscore.js', type='text/javascript')
    script(src='/javascripts/backbone.js', type='text/javascript')

At this point, I should remember that it's probably better to use Restify as the backend service or express without jade as backbone provides templating via underscore, however I will probably figure out how to add that in.

Useful: http://addyosmani.github.io/backbone-fundamentals

Basic todo / localstorage tutorial: https://github.com/jeromegn/backbone.localstorage

Dropwizard / JDBI String Templating

At first glance the documentation seems straight forward, but with some updates to dropwizard framework and some undocumented additions to JDBI

Based on Brian McCallisters' original blog post: http://skife.org/jdbi/java/2011/12/21/jdbi_in_clauses.html

@UseStringTemplate3StatementLocator("/sql/templates/TestDao.sql.stg")
public interface TestDao {

 @SqlQuery
 Iterator getDevicesWithInClause(
   @BindIn("guids") List guids,
   @Bind("limit") Integer limit);
}

The main pieces of information that I had to hunt around for are:

• @UseStringTemplate3StatementLocator replaces the now deprecated @ExternalizedSqlViaStringTemplate3
• you can pass a value to the @UseStringTemplate3StatementLocator which is the location (on the classpath) of the string template file.
• In your string template file, for normal @Bind parameters you still use the standard colonprefix

sql/templates/TestDao.sql.stg

group TestDao;

getDevicesWithInClause(guids, limit) ::= <<
 select distinct(guid) from table where guid in () limit :limit
>>

Ruby environment notes

IDEs

• Eclipse with ruby DLT currently only supports up to Ruby 1.8 (Quite a big language change in 1.9 so not much good) 
• RubyMine - excellent, but ~£90 (look out for offers from Jetbrains, they run them regularly) 
• Aptana Studio - Built on eclipse but full ruby support (or at least 1.9 language support)

Build Tools

• Rake - (Ruby mAKE). Like ant / make for ruby
• Look in the 'Rakefile' and see targets defined. (e.g. 'rake test' will often run tests)
• Gem - repository of compiled modules for ruby
• See usage 'gem --help'. 
• gem install <gem name> / gem uninstall <gem name>
• Bundle - Used to manage dependencies for a project. (Use 'bundle install')
• Gemfile contains list of repositories and files to use

Testing

• Rake - Test call minitest / rspec files etc..
• Minitest - https://github.com/seattlerb/minitest

Ruby notes

Not being familar with ruby, here's a few notes / cheat sheet as I keep forgetting the basics

Functions:

def name (param1="Default Value", paramN, *args, &block)
  // actions
  return val
end

*args - A variable sized argument (arg.length)
&block - a block to be automatically converted to Proc

Naming conventions:

Type	Example	Notes
constant	Pi	Starts with capital letter. Is mutable!!!
boolean test	isEql?	Methods with a boolean response are prepended with a '?'
destructive test	delete!	Makes changes to object on which the function is invoked on (ends with '!')
setter method	name=(n)	method name ends in '='s sign
instance variable	@counter	.
class variable	@@times	.
global variables	$global	.

Symbols:

Placeholders for identifiers and strings, always prefixed by a ':' (colon). Can't be directly created - for Strings - use to_sym or intern methods, use id2name to transform back.

Effectively transforms the string content into a label. Because of the interning symbols are more memory efficient then copies of strings.

name = "Matz"
name.to_sym # => :Matz
:Matz.id2name # => "Matz"
name == :Matz.id2name # => true

Conditionals:

if a == b then <do stuff> end
if a == b: <do stuff> end // : instead of 'then'
if a == b && b == c: <do stuff> end
puts "output" if a == b  // no need for then & end if used as a statement modifier

if a == 1
  puts 'one'
elsif a == 2
  puts 'two'
else
  puts '!(1 || 2)'
end

if a == :foo
  puts "test against symbol multi-line"
elsif a == :bar: puts "test against symbol single line (extra colon)"
end

case foo
  when :foo; "Foo"  // NOTE: the ':' operator was allowed in ruby 1.8
  when 1..3; "Range of value test"
  else "default"
end

Iteration:

while <condition> do   // 'do' is optional
  // code
end

begin
  // code
end while <condition>

for i in 1..5 do  // 'do' is optional
  print i, " "
end

// Alternatively, use 'times' method from the Integer class
5.times { |i| print i, " " }
// also there is upto and downto methods
2.upto(8) { |i| print i, " " }

unless - like a negated if statement

until - like a while loop, do until a condition is met

loop - creates a loop forever until a break condition is met (such as break statement)

Strings:

my_string = %{A string with customer delimiters defining start / end}
multi_line = <<#  // use -<< to keep indentation
  text across multiple
  lines with a custom delimiter
#
h = "Foo -".concat("bar") << "!" // concatenation methods
h.freeze // make string immutable, check with frozen? method
h[3] // access 3rd character code at index location (use h[3].chr for character)
h[start, len] // substring
h.index("b") // search for char
"a" <=> "a" // 'spaceship operator' contains character code of strings, returns 0, 1 or -1

== and eql? are slightly different(== returns true if two objects are Strings, eql? checks content and length)

Arrays:

Array.new || Array.new(12) || Array.new 12 || Array.new(12, <default>)
Array.new(10) { |e| e = e * 2 } // [0, 2, 4, ..., 18 ]
%w{ foo bar who har } // new array with whitespace separating entries
rg = Array(0..9) // [0, 1, 2, ..., 9]
rg = Array[ "one", "two", "three" ] || [ "foo", "bar" ]
rg[-1] // access last element in array, or rg.first / rg.last
rg.index("two") == 1 // lookup index of item
rg1 & rg2 // intersect of arrays (only common elements)
rg1 - rg2 // difference (only unique elements)
rg1 | rg2 // union (join with dupes removed)
rg.pop || rg.push || rg.shift || rg.unshift // stack operations

Array.clear
Array.empty? // true | false

Hash / Dictionary

Hash.new || Hash[ :key1, "Value1", ... ] || Hash[ :key1 => "Value1", ... ] 
Hash.new("month") // hash with a default value - the one returned if key has no value associated with it
h = {symbol: "value"} // 1.9 using symbol as hash key
h = {:symbol => "value"} // <1.9 ruby using symbol as hash key

h.has_key? :key1 || h.has_value? "Value1" || h[:key]
h.keys // list keys
h.values // list values

h.delete( :key )
h.delete_if { |k,v| v == "Value1" }
h.clear || h.empty?

h.each { |k,v| puts "#{k} / #{v}" } // loop through each key-value pair
h.each_key || h.each_value // just keys or values

Classes:

class Hello < Greeting // Hello extends (inherits) Greeting
  @@size = 0 // class variable

  attr :onlyget
  attr :getandset, true // second argument true
  attr_reader :gone, :here // getter
  attr_writer :count, :set // setters
  attr_accessor :start, :stop // accessors 
  def initialize( arg1 )  // c'tor
    @val = arg1   // @ == instance variable
  end

  class << self // singleton class, instantiated by the enclosing class
    def polygon(vertices, length)
      -- snip --
    end
  end

  def Hello.bye // Class method
    puts "Goodbye"
  end

  private  // methods below here are private (also can use protected)

  def hidden
    ... snip ...
  end

end

Hello.polygon(2, 5)

Hello.instance_methods - Object.instance_methods // print out the Hello specific methods

h = Hello.new( "Test" )
h.respond_to? (:gone)  // test if instance responds to method invocation

Blocks:

Nameless functions (effectively a closure). Can be wrapped in 'do' 'end' or or braces {}. Braces have higher precedence.

['purple', 'monkey', 'dishwasher'].each { |e| puts e }

or

['purple', 'monkey', 'dishwasher'].each do |element| puts element end
Automatically convert block to proc, prefix param with & (ampersand)

def return_proc( &proc )
  yield
end

return_proc { puts "Convert block to proc" }

Procs / Lambda:

Store procedures as objects complete with context. Invoke with call method (count.call)

count = Proc.new { [1,2,3,4,5].each do |i| print i end; puts } 
your_proc = lambda { puts "Lurch: 'You rang?'" }
my_proc = proc { puts "Morticia: 'Who was at the door, Lurch?'" }

Note: lambda / proc is preferred to Proc.new.

Modules:

like namespaces, a Module/class including a module inherits it's contents. 

Must be named as a constant (capital letter).

include Mymodule // if in same file

require 'Mymodule' // if module is in a separate file

Can define module methods by prefixing method with module name (e.g. def Mymodule.method)

Exception handling:

rescue analogous to catch, ensure analogous to finally in Java.

begin
  // do stuff
rescue ZeroDivisionError // type of exception
  // do stuff
ensure
  // do stuff
end

// throw / catch

def test(val)
  throw ( :zero ) if val <= 0
  return 5 / val
end

catch( :zero ) { test(-11) }

Metaprogramming:

write a program (or part of) using another program. 'define_method' in Module is key element - creates methods on the fly.

class Foo
  %w{ foo bar yar }.each do |n|
    define_method(n) { puts "method #{n}" }
  end
end

Foo.new.bar // prints 'method bar'

Miscellaneous:

• alias - reference to another method. A way to have access to overridden methods. (alias <new-name> <existing-method>)
• yield - Used within a method to execute a block associated with it. Can test for presence with block_given? test (def doit if block_given? yield else puts "no block" end end)
• BEGIN / END can define blocks that execute before and after a program runs (BEGIN { puts "Date and time: " + Time.now.to_s } )
• .class method returns type of object being called
• irb - command line ruby interpreter
• ri - command line ruby documentation, i.e. 'ri Array'