AngularJS Twitter Search

Uploaded by johnlindquist on 06.04.2012


This video is going to show you how to make a Twitter
searching app using AngularJS.
You can see, I already have Angular set up here as well as
the resource bundle plug-in, or whatever the cool kids are
calling it these days, and the bootstrap CSS because I can't
design worth a crap.
So the first thing we're going to do is set up ng-app,
initializes the app.
And then set up our first controller ng-controller, and
let's call it TwitterCTRL.
Now, if you've seen the other videos, or the other video of
mine, this should all be familiar.
If you haven't seen it, then go back and watch it.
So we're setting up our Twitter script here.
And we'll set up our first controller to match up with
our TwitterCTRL here.
This will be our angular controller.
Now if you've read in the documentation on the resource,
you know that you have to inject or pass the resource as
a parameter into your controller.
But you'll notice, if you try and run this now, it will
completely bomb on you, and you'll get unknown provider
with a whole bunch of cryptic errors at the bottom that you
have no idea how to solve until you read the
documentation, and you realize it's really not all that bad.
So we'll just name our module Twitter and then pass in its
requirements which is simply ng-resource.
What this does, it sets up our ResourceProvider and allows
resource to be injected.
So it satisfies that dependency by setting up this
module for us.
And then, you can set up more config stuff, more providers,
and injection logic and stuff.
I'm not going to do that in this video.
But it's available.
The one caveat here is that Twitter does need to match up
with this right here, Twitter.
Very, very important that Twitter and Twitter match up
or else these dependencies in your app will completely fail.
So if we rerun this now, you'll see no errors.
So we can continue on our merry way.
So now that we actually have a resource, let's talk about
what it is.
So it's basically just a API or anything on the web
locally, whatever.
I'm actually just going to use the Twitter searching API
here, because it's nice and sexy as opposed to more boring
examples that wouldn't do much.
So we'll set the resource up as just a Twitter
property on our scope.
And you can see that if we just simply call Twitter.get,
which is one of the first methods that a resource gives
you, that it will actually go ahead and
try and make a request.
But, obviously, you need to pass in some options to this
Twitter search.
So the first thing we're going to do is set up the action,
and this is just search Jason as well as the query.
And you can learn more about this from
the Twitter API Docs.
And the query we'll use by default is just AngularJS.
Now, this action what this actually means is that if I
type action here, whatever this is will get
replaced by this guy.
So if you look at how this is done, it's going to say search and then search Jason with the q as a
parameter passing in AngularJS.
Method is allowed.
What that means is it simply requires us to use when we
call get instead of using just a default get, we're going to
change the method to something called JasonP cross domain
Jason loading and all that jazz.
So now you can see, we're actually in business here.
We have loaded sum Jason, and we have results based on that
query that we sent.
So so far, we're actually doing pretty good.
What we need to figure out now is how we're going to get this
data into our app.
It's nice that you can see it in the Firebug Console, but
that's not doing a whole lot for us quite yet.
So as usual, there is a callback property we can set.
We can set it to something like Twitter search, and then
define a function up here called Twitter search, and
then check the results, and this is OK.

So we got a result back, but that's kind of out of scope of
what we want to do.
We want to keep things nice and in scope of what our app
is actually doing.

So let's change this to something that's provided to
us by Angular , something called Jason Callback, which
is going to automatically generate a
callback from Angular.
So this will allow us to do something like this where we
can say this is better.
Invoke this guy, you can see this is better.
Because now we can use this callback which is nice and in
scope of our controller and we could use those properties and
But what's even betterer is something that looks a little
bit like this.
Twitter results, actually that might be a bit confusing,
let's just name it Twitter result.
Because there is an array of results on our result here.
Now that we have our Twitter results, let's go ahead and
the loop through them.
Go ahead and set up a table.

And the class table and I think it's table striped.
And then, set up a row.
And then, set up our looping ng-repeat.
And I'll go for each tweet in Twitter result.results.
Because if you look through our results here, you can see
that there's a list of results on our response
zero through seven.
So in each of these results, we're going to loop through,
set up a couple columns.
The first column can be, let's just do the text of the tweet,
tweet and that's just text is the property
we're looking for.
So now that we have this, we magically have a whole bunch
of tweets just by using--
I can't imagine writing this in any less code honestly.
I think this is just amazing.
So we have a resource.
We have it set up to search Twitter, this search Jason
replaces this action which makes it nice and flexible.
And in future examples, where I could swap those out.
But for right now, that's all we're going to do.
It sets up a default query of AngularJS and sets up a
callback which is automatically generated for
you which means that this result will get assigned
asynchronously once that's done.
And then, you can just simply loop through the results and
start displaying them.
So so far, we're actually doing pretty good.
Let's go ahead and add a search button.
So we'll set an input with the type of text.
If you remember, ng model does the 2a binding and we'll call
this our search term.
And then we'll set up a button with a class of just button.

We all love the icons.
Whoops, that's not icon, that's icon search.
Sounds good to me.
And then the text of search.
So if we look at this now, we'll have a search box with a
search button.
Actually, let's line these up a bit.
Form with the class of form horizontal.

And that will look a little better.

So now that we have this, nothing's hooked up.
We'll go ahead and set up the click on the button, ng click.
We'll just call that do search.
And then, all we have to do is simply
wrap this in a function.
And that function is going to be do search.
And instead of passing in the default query, we are going to
pass in our search term which is remember it's two-way bound
to do this from the ng model in our input.
And then, this q for the query is going to override this one.
And if you cross your fingers and you type something great,
and hit search, it should just work for you
right off the bat.
I know I took a roundabout way to write a very little amount
of code, so I just want to quickly recap what's going on
before I close up here.
So we're using Angular with the resource plug-in.
You have to set up the resource plug-in by requiring
it here, which will allow you to inject it.
You would use the resource by passing in the URL that has
the resource on it.
And then, this is swappable.
I could've included an action in here, if there was another
action other than search.
But search only as search.
And then, these defaults can all be replaced.
These are parameters.
And I could replace callback if I wanted to do as well.
But I only replaced query because that's the only one
that made sense.
And we're just using JasonP instead of just regular get.
Then, once this is invoked, it will be assigned once that
result is returned.
And then, I can operate on the Jason just as you normally
would using Angular by looping through your results and
displaying the tweets.
So there you go.
Glad you watched the video.
If you're interested in following me on Twitter, you
can search for me, just John Lindquist.
And I'll look forward to more tutorials.
I do hope to expand on this one to give it some more