Diving into AngularJSFRANCIS SPORTVUG – SEPTEMBER 9, 2014

About Me• Primarily a .Net C# Developer

• Works remotely, some of the time without pants

• Has a fantastic 4 year old daughter and an awesome 2 year old son, a cool wife, and a great dog who warms my toes in the winter.

What’s the deal with AngularJS?• It’s also a Single Page Application framework, backed

by Google

• It’s a Javascript Model-View-Controller (MVC) framework

• Possesses it’s own html bound directives to handle templating of results

• Two-Way data binding out of the box

Good tools I’ve learned aboutThe Visual Studio Track

• AngularJS is on NuGet as a package – sets you on a weird path, because the JavaScript libraries have their own package manager (npm & bower)

• As of VS 2013.3 you can use the JS tools - http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx

• Hot-Towel – John Papa’s (@John_Papa) NuGet package of a fully setup AngularJS application

The Rest of the World Track• TextMate, Sublime, etc all have good JS handling (I

choose atom by github since it’s new and I’ve never played with it before)

• Command Line Utilities• npm & bower – Package Management – get new stuff• grunt or gulp – Build tools –this world’s version of

make/rake/ant/nant/raven/maven/etc• Yeoman (yo) – fantastically awesome scaffolding tool

Essential Tool – Either way• Batarang – Chrome Developer Tool Extension – drills into

scope, and provides all sorts of interesting debugging info

Code Demo

Completed code demo is: https://github.com/francisspor/tvug-angular-september-2014

Cool Resources I’ve Found for Info and Neat Stuff• Twitter – People share stuff all the time• @angularjs – main angular channel

• @angularjs_news – another channel of info

• @addyosmani – developer of yeoman, does cool stuff in chrome too

• @john_papa – Pluralsite contributor, MS MVP

• @DanWahlin – Another pluralsite contributor

Other neat things to look at• BreezeJS – a magic service wrapper to plug angularJS

right into .Net WebApi – you tag a special controller and it just “all works”. I haven’t gotten it to work yet.

• Durandal – Another SPA framework.

• Ionic Framework – HTML5 AngularJS framework for Native focused Mobile Development

Any questions?• All pictures of the Doctor taken from Wikipedia