Monday, November 10, 2014

AngularJS Simple Noob SPA

(Note: Link to the doc is at the bottom of this post).

I've been working on really formalizing my JS skills for quite a while now. Much as I have loved ActionScript-based development (and it has loved me), the fact of the matter is, the time has come (actually it came at least two years ago); get urgent about JavaScript technologies, both client and server-side, or get run over by industry urgency.

If you don't, you assume a lot of risk:
  • Users will complain. They want flexible, adaptive apps that update with new features frequently. 
  • Your talent pool will suffer: UI engineers and developers know that confining yourself to ActionScript based technologies is short sighted in terms of career.
Believe me, I have nothing against Flash based technologies. But the wheel has turned; if you're not already actively moving this way...well...not sure how to finish that.

To that end, you have to pick your guns. There's SO much JS out there. I have chosen, as my core study (no surprises here):
  • AngularJS
  • JQuery
  • Node
  • The related HTML5 capabilities (local storage, canvas, Server Sent, etc.). 
As far as a packaging technology, I'm looking at Browserify and RequireJS. People are pretty adamant about one or the other, I'm trying to sort it out. (And of course, I keep up on my fundamental Java, I study Clojure when I can, and so on, but that's another discussion. The notion of programming directly to an AST is fascinating to me; I think there's a lot of potential synergy between Clojure and UI). 

I have found (and continue to find as they evolve) these technologies can take care of just about everything, and are relatively stable and well supported compared to the rest of the pack. I get that there's a LOT more and people can be very religious. But I don't think anybody would debate that this is a perfectly acceptable front end stack (and even back end with Node, which I'm increasingly amazed with).

Anyway, I had a conversation with a dev friend, who lamented, "Angular seems great, I want to learn it. But there's SO many modules, so many ways to bootstrap, so many directives...all I want is a simple one pager that shows me how to do the most commonly used, fundamental things."

So I looked around, matched it with what I have found as the most common and basic things I use, and built that simple one pager.

It shows, very simply and without any CSS or other errata that gets in the way of the quanta, which in Angular terms is Controllers, Directives, Filters:
  • This is how you tie a Controller to an area of HTML markup. 
  • This is how you inject data from that Controller into that markup area. 
  • This is how you use directives to control that injection.
  • This is how you use filters to further control the injected data. 
Sure, there's way more to learn, and this is by no means how you should plan on writing your apps. But it got my colleague started, so I figured maybe it's a useful cheater.

To use:

You need to have a local or remote web server that you can create a directory on, and put three files in.

If you don't already have a pretty firm grasp of JS and its peculiarities, and don't already have or know how to set up a basic web server (you can use Node, Apache, IIS, Tomcat, whatever), then you have more groundwork to do and really don't belong here yet. 


Those files are:
  • The downloaded one (views-directives.html)
  • Two "fragment files" (you will need to create these):
    • fragment1.html (should contain This is fragment ONE).
    • fragment2.html (should contain This is fragment TWO). 
Those fragment files should contain NOTHING else. No html/head/body tags. Just the ... tag (they are fragments, not full HTML files).

Then access this way and it should just work:

http://myHost/myDirectory/views-directives.html

Again, there's no formatting, no nothing. It's VERY bare bones. View the source, read the comments, experiment with the individual pieces to get a feel for it.

Here's the file link:

https://drive.google.com/file/d/0B5V0acodILWkQUJPbFA4UGI4azQ/view?usp=sharing

As always, thanks for visiting.