CoderCamps Week Five – AngularJS

AngularJS is an immensely popular framework for front-end web developers written entirely in JavaScript.  It’s designed to simplify and speed up web development by giving you shortcuts for many of the common tasks you need to accomplish as a developer – typically the “plumbing” type tasks of connecting A to B, or defining what page you should see if you you go to this URL; and, of course, DOM manipulation.  It’s strength is in single page apps that have a lot of user interaction requiring many updates to the page.

And this week was all about AngularJS!  Angular 2.0 is in beta; so we focused on the current released version, 1.4.8.

Monday we focused on covering the fundamentals of AngularJS – things like simple data binding (so cool!), event handling, routing, and master/detail views.  Our homework was to simply set up routing on our final projects (available here), but that was a simple thing to do.  I spent a good chunk of time writing out a cheat-sheet on how to create an AngularJS  project in Visual Studio using the built-in C# Web API template.  If you’re starting from scratch, the whole thing has about 40 steps.  (This is why I created a cheat-sheet – no way am I going to memorize all those steps for a while to come!)  Creating documents like this has the added bonus of helping me to truly understand what I’ve learned so it was time well spent.

Tuesday was a little more challenging when we revisited routing and then dug into services.  $http for making AJAX calls, services, dependency injection.  As most of my prior exposure has been in C#, thinking of what I would call “utility classes” as “services” requires something of a mental adjustment when to me “services” === “web services”.  But like learning any language, a little practice got me past that (although I shall probably have to readjust my thinking when we get into C# next week).  Dependency injection is something that seems to give people headaches, but other than a lack of familiarity with all the possibilities (and a seeming inability to reliably use camel case on things like ngResource), I didn’t have too much troubles grasping the concept.  I’m sure there is much more to it than what I’ve learned so far, but I am comfortable with the concept: essentially just plugging in the resources required by the module.  A little like knowing that if I’m taking a beach vacation I’d better take my swimsuit, but if I’m going hiking then I’ll need my hiking gear.

For Wednesday, given that pretty much everyone struggled with the homework (using $http to grab & display all movies matching a user-selected genre from a dropdown – I came close, but needed help with the query), we stepped very carefully through the $resource lesson.  Given that $resource is your best choice for CRUD operations, and that is part of our final project requirement, it was pretty important to understand it fully.  Something that always helps me is understanding the flow of information through the application.  Fortunately we did step through the application code in order to understand what is being called when.  As someone who thinks both visually and in workflows, it helps me understand the code if I can “see” or visualize the flow of logic.  That was a 1/2 hour well-spent!  For our homework – more reading and more work on our individual projects, as well as recreating the $resource code we worked on today (for the practice).

Thursday – ah … apparently modals do not work well with routing.  Who knew?  So after a few hours struggling with this Thursday night, I now have all routing in my final project except for the one modal I’ve written so far.  It’s funny how sometimes “simple” stuff trips you up and takes hours of trouble-shooting.  We were using AngularJS US Bootstrap and although I’ve used plain ol’ Bootstrap modals in the past, using the AngularJS one was a little different.  But here’s what I learned later in the week working on my own project: binding totally ROCKS.  If I bind input elements on the main page to a property in the associated controller, I can then pass those values to a modal using $ and resolve.  Because it’s two-way binding, if I make changes to the values of a property in the input elements on the modal, they will immediately update in the main page.  How cool is that??  Yes, I really do get that excited about things like this. If you want to see it in action, check out my final project in a couple of days.

Something else we covered (amongst many other topics) was validation.  AngularJS has it’s own client-side form validation.  Now, you never want to rely on client-side validation alone because it is easily thwarted by simply disabling JavaScript in the browser.  That said, some immediate feedback to your users is nice.  Things like “hey this field is required!” as indicated by bright yellow highlighting can save users a lot of frustration.  We’ve all had the experience of completing a form, hitting “submit” and then finding that not only did it generate an error after submission, but we now also have no data and have to start over from scratch (this is bad coding, by the way).  So knowing that as soon as I tab out of a textbox that my password isn’t long enough, or that the field is required is a good way to help keep your users a little happier.

Friday was a couple of wrap-up topics for AngularJS – using Google Maps and showing progress.  Plugging Google Maps into an Angular project was surprisingly easy and very easy to set-up.  I’m hoping to incorporate that into my project.  Friday afternoon we worked on a collaborative project – a bit of a challenge when half the class is there in person in Seattle and the other half is online via WebEx.  But we made some progress and the collaboration is continuing over the weekend so we can get our “Car Dealership” application done.  This will require use of filters and dropdowns along with binding and services – lots of fun!

Looking forward to next week as we’re back in familiar territory for me: C#.  Although perusing the list of topics there will be some things covered that I either have only passing familiarity with (IDisposables, for example), and topics I’ve yet to study (unit tests).  So it will be a good week, and between homework, reading and keeping up with the all-day instructor-led sessions, I’ll be continuing to work on my project.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s