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


















