Book Image

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
Book Image

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

Table of Contents (17 chapters)
AngularJS Web Application Development Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Adding a Facebook login


Using the Facebook JavaScript SDK, we are going to create our very own directive for the Facebook login. We could simply copy and paste the sample Facebook login code available on the developer portal into our index.html file, and it would just work. However, this wouldn't be a clean approach. Instead, using directives helps to make the code abstract, thus keeping it clean, and once you have your own directive, it becomes quite easy to add the Facebook login into any of your other projects.

Now, let's try and get our Facebook login to work.

Adding the fb-root div element

Whenever we use the JavaScript SDK for Facebook, it's important that we have an empty <div> element with an ID named fb-root just after the <body> tag. The SDK uses this <div> element to insert other elements as needed.

Let's open up our app/index.html file and add the following highlighted <div> element:

<body>
    <div id="fb-root"></div>

In case you don't create...