In this tutorial we will build a simple Twitter search app from scratch using AngularJS. The application will let us log in via Twitter and fetch tweets from the user timeline. Besides, the application will feature a search box to let the user searching among the tweets shown. In this tutorial, you will learn about the usage of OAuth for the Twitter authentication, various functions to retrieve tweets, load more tweets through the use of a "Load more" button, and search tweets with the help of AngularJS two-way data binding.
Application Flow
Once the app is loaded, the UI shows a "Connect Twitter" button to the users. After clicking on it, a popup is opened and the user is shown a Twitter login screen to authorize the application to access his/her timeline. OAuth is used to provide secure authorized access to the Twitter API. OAuth doesn't require users to provide their password to third-party applications and this increases the account security. After logging in, twenty tweets from the user timeline will be loaded but using the "Load more" button, the user is able to load more tweets. The "Sign out" button will let the user to log out.File structure
Now, let's discuss the file structure. All of the files will be in same directory and are set up as follows:app.js: This file will be used to define the main module and the internal services module of the application.controllers.js: This file will handle the various user interactions.index.html: In this file we'll load the main module and provide the user interface.oauth.js: This is the JavaScript SDK provided by OAuth.io to handle the OAuth authentication.services.js: It'll be used to handle the communication with OAuth.io.
Registering the app
As I mentioned in the previous section, to simplify the Twitter OAuth integration, we'll use OAuth.io. Before that we must head to https://apps.twitter.com/app/new and create a new application.Continue reading %Building a Twitter App Using AngularJS%
by Preetish Panda via SitePoint
No comments:
Post a Comment