#client side framework

[codewardbound]

AngularJS filtering and other magic

Think you know everything about Angular from reading one post? Well of course you do! That's just cuz you're super smart but what if I told you, you could search through all the stuff in your resource array without clicking a button or even refreshing the page? "Witch" they call me! Ha! Well I'll show them! Through some Angular magic.

You can do some sweet searching/filtering through the custom attribute <ng-model>. ng-model basically lets you create variables in real time in the ng-repeat (repeater's) scope. Now by doing this seemingly simple thing, a whole ginormous world of possibilities are about to open up!

Hold on tight, I'm about to blow yo freakin' mind!

Putting ng-model on an input type will basically create a variable "on the fly" and populate it with the value of whatever the user types in. Since that variable is in the controller's scope, you can use it to do things like filter/search and order your resources in the view. 

The way it works is the values that come from the iteration 'nics in nic' will be piped (|) to the input of the filter which is based on the value of what the user types in. What the user types is then bound (binded?) to the query property.

Since this updates in real time the user will see the updates of the search in real time. Without a page refresh. It's really sweet!

You can also use the | filter for other small bits of logic inside of the templating curly curlies

Re-re-repeat

ngRepeat updates the view in real time by only showing the results of the array that come out of the filter.

Fun Fact! The value of query can be accessed within the controller since it's defined in the same scope! I'll let you think a bit on all the fun goodies you can do with that. 

There's also the ability to have objects as variables. Where you can do alil sumthing like this:

Order it, just a lil bit...

Let's say you want your data to be displayed in a certain order based on a attribute in your data set (ex: by date, by nickiest nic, by age, etc.) - Well orderBy looks to be the tool for you.

It's as simply as setting a variable equal to the attribute of the data you want to initially sort/order by. Taking that variable and popping right next to the filter bad boy from above. Then wam bam thank you sam, you gots yourself another filter! The most convenient way to use it is within a select input so you can restrict the user's choice for ordering to properties on the object itself.

There's another directives you can use like ngClick to interact with your dataset. 

This will basically call the newMonkey() function you have defined on the controller's scope - which, if you recall, has access to dem there "on the fly" created variables from the user's input. So you might be able to do even more fun things there as well. 

Data Functions

Angular has a bunch of different options for encapsulating data gathering functionality, through: Factories, Services, Providers or Values. They all basically do the same thing, gather the data but differ in the way they create the object that gets the data. 

Factory - creates objects and attributes inside of the function and then returns the object.

Service:- Similar to Factory but instead uses defines attributes on the keyword this.

Provider - Has a $get function we can define and use to return the data. They can be configured during the module configuration phase.

Value - A way to get simple data, like key value pairs. 

I might have to get into this in a separate post but for now you can check out this example of the differences here: http://jsbin.com/ohamub/1/edit

So at this point you may be saying to yourself, "Wow! Now I REALLY know everything about Angular. Thanks Codeward!". To that I would say "Whoa whoa, there's still plenty of meat on that bone. You take what you learned here, try it out on your app, check out the Angular API Docs, throw it in a pot, add some server-side stuff, well then you got a stew going!"

For now that's all I have on all the amagical greatness that is AngularJS. There is plenty more to learn, so I advise you go seek out the docs and try things out like forking and improving my Nic Cage app here. Isn't this so much fun? And I didn't even have to use my witch powers this time...this time...

Resources:

AngularJS Filters

AngularJS API Docs 

Title credits: Pilot - Magic

[codewardbound]

AngularJS

I'm a simple man. I like my donuts warm, my tea wet and my client-side apps thick.

AngularJS is a client side framework meaning there are no servers involved. All the manipulation happens on the client. THICK! It has a similar structure to other MVC frameworks like Sinatra and Rails but it's so so  different in a bunch of ways. THICK! 

First off, Angular is a beast on the client. THICK!  Angular is great because you can do logic and perform complex operations without a full page refresh. THICK! The reason I keep yelling thick (THICK!) is cuz all this craziness I've been talmbout (read: The features I've been expressing early on) is done on the client. Meaning it's a bit thicker than other client side applications.

Similar to Sinatra, you're free to organize your folder structure any way you want to, as long it's right. Also similar to Sinatra, specifically Sinatra's Ratpack boilerplate provided by our super instructor Ashley, there are some opinionated projects around to help organize the Angular files in a logical manner - such as Angular Seed.

Angular is good for applications where you don't wanna manipulate too much data and you want realtime more responsive user interaction.

DA VIEWS

Let's start with the HTML first cuz why not! YOCO (You only code once). Angular apps are really one page apps with partial views that can be swapped in a out. 

"In Angular, the view is a projection of the model through the HTML template. This means that whenever the model changes, Angular refreshes the appropriate binding points, which updates the view." - Angular folks

DAAAAAAAAAMMMMMMMMNNNNNNN Angular told you! Not me. You. Let's do this!

In our index.html. First thing we need to do to create an Angular application is to define the Root Scope. We basically have to tell the app what it is, similar to putting a Class around a SInatra application. 

We do this by adding a custom attribute to the html tag like here:

<html ng-app="nicCageApp">

Angular has these custom attributes we have to add to our HTML to tell it how to interact with the JavaScript. You can always tell an Angular custom attribute because it starts with ng-. These attribute names map to a directive of the same name only CamelCased.

The ng-app custom attribute is mapped to the ngApp directive which tells Angular this is the root element of the application. So we can either put this ng-app attribute on any portion of the page we want to be an Angular app. Right now by putting it on the html tag, the whole darn page is an Angular app.

Next let's set the controller.

<body ng-controller="NicListCtrl">

Just like in server side MVCs the controller binds the model and views. Except in this case there isn't really a model atleast not in the Server side way of thinking. The model is called a resource and is a an array, usually of objects, that's assigned to a variable that is in scope to the controller.

Putting the controller custom attribute ng-controller on an html element basically gives the same scope the controller has to that element and any child elements. Children always just get things don't they? 

We'll put our controller on the body tag since we want everything inside to have the same controller scope. The whole darn page. This is basically how we set up the relationship between the resource/model and the view. The controller is basically a function that gives context to the view. 

Now here's the big part, connecting the view to the resource. Similar to how we can use Embedded Ruby to iterate through data we bring to a view Angular has it's own iteration that does most of everything...it does everything for us called ng-repeat. 

<li ng-repeat="nic in nics">

ng-repeat is a custom attribute we can use for iterating through our resources. You just need to put it on the element you want repeated (ex: <li>, <td>, <cupcakes>, etc.) along with the resource name (nics) and the elements where you want the values of the resource to go (<p>, <h3>, etc.) 

Similar to Erb where we would use <%= %> templating syntax to evaluate Ruby inline, Angular templating is done with double curly brackets (which I'm called Curllex for no real reason). So the output of the valid JavaScript statement within in the Curllex is displayed to the screen.

Then Bam-Shazam! It. Just. Works. This is more of that declarative style of programming we saw in D3. Just get comfy with it folks, it's here to stay for awhile. Note that the convention is to give the resource, like any collection of things, a pluralized variable name. Also note the special custom tag for images - ng-src. 

There you have it. Done with the HTML. Now here's the time we make that mysterious controller we've been talking about.

Angular Seed tells us to put our controller in the JS folder and being the rebel I am, I listen since I am no rebel just a poor small man with no boat and no goats. 

DA CONTROLLER

Controllers in Angular are....well they are different than server side MVC frameworks. With server side MVC, the controller's responsibility is to basically mediate the communication between the model and view. In Angular the controller performs a similar responsibility but the communication is mostly done by setting the scope of the view. That scope includes the various resources and variables the view has access to. Let's look at some code:

In this controller we are creating the application name space and binding the data. We got the data by making a HTTP GET request to the server route 'nics/nics.json' who was nice enough to respond with some JSON.

There we go ya'll. That's all we needed to do to get a simply Angular app up and running. Nice right? Currently this is a one page app but what if wanted multiple page. Then we can start talking about routes.

DA ROUTES

Since we aren't on the server, Angular has a special way of handling routing requests to other "pages". First off, a "page" or view in Angular really is just a partial that slips into the index.html, wherever you define the custom tag ng-view.   

In order to add routes we have to switch up our app structure a bit. You see, first we have to add the ng-view tag to our html and then we have to add another controller to handle the different route since it'll have a different scope, then we have to actually create the routes in the app.js file then....ahhhh you know what? It's better if I just show you code.

Chicka-Chicka yea yea! Clear as mud? It's going to take some time. AngularJS a bit of a steep learning curve since the way it handles MVC is a bit different than the server side MVCs we all know and love. We'll fall in love Angular so fast you'll think it was refreshing your heart without a full body reload. Hey guess what? It already did.