Angular JS Tutorial Intro

A couple weeks ago at Sonoma, we had a labs day where we could break into groups and work on whatever we wanted to.  My main goal for the labs was to work with something I hadn't worked with before.  The few areas I am currently interested in growing in are working with mobile (I don't have a mac so this is limited to android), JS frameworks, and open-sourced web frameworks (Rails/Django).  I joined up with a group that was going to work on keeping track of internal training.

My main part had to do with displaying child records in an iframe on the parent training record in our Microsoft CRM environment.  Unless you wanted to create your own app from scratch and link the URL to that page the only way to have a custom UI hosted inside the CRM app is to have a Silverlight page or HTML/JS page that is loaded into CRM.

I decided to write my part in angular so I would be working with a new framework.  I thought that it would be a breeze to learn it since I already had knockout experience, but it ended up taking me way longer than I expected.  I was able to get into the hang of it and created a directive using a custom html tag.  One thing I will say for Knockout is their tutorials and SDK are really well flushed out.  I found Angular's confusing and lack of definition irritating.  You can see one of the early versions of the project on my Github page here.

Here are some initial thoughts I have on the two libraries.

Kockout.js

Pros

- Great tutorials and online help 

- Two way binding

- Calculated fields

- Complete HTML templates (don't have to use strings)

- Can use comments for KO binding 

- Can create your own bindings to work with widgets and other JS controls.

Cons

- View Model is tightly coupled with knockout through observables, observable collections, etc. 

- View is tightly coupled with knockout through KO attributes in your html tags.

Angular.js

Pros

- Two way binding

- Can bind via Angular attribute tags or {{}}

- Comes with JQuerylite

- You can easily write your code without coupling it to the Angular libraries

- Comes with promises built in

- Easy to extend and write your code via namespaces.

- Template routing (haven't used this)

- Built in dependency loading

- Can create your own custom tags and other cool stuff using directives

Cons

- Tutorials and online help are lacking

- View is tightly coupled with knockout through angular attributes in your html tags.