Skip to main content

How to get facebook user details using AngularJS



In this tutorial I have explain about the fetch Facebook user details using AngularJS 

<html ng-app id="customersApp">

  <head>

    <title>How to get facebook user details using AngularJS Tutorials</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script>

      var app = angular.module('customersApp',[]);

      function facebookController($scope, $http) {

          //DwayneJohnson - facebook UserId

          $http.get('https://graph.facebook.com/?id=DwayneJohnson')
            .success(function (data) {
              $scope.customers = data;
          });

      }

    </script>

    <style>

      table {

        margin-left: 300px;

        color: #333; 

        font-family: Helvetica, Arial, sans-serif; 

        width: 640px; 

        border-collapse: 

        collapse; border-spacing: 0; 

      }

      td{ border: 1px solid #CCC; height: 30px; } 

      td {

        background: #FAFAFA; 

        text-align: left;  

        padding-left: 3px;

      }

      .user-image {

        width: 350px;

        height: 150px;

      }

    </style>

  </head>

  <body>

    <h1>How to get facebook user details using AngularJS Tutorials</h1>

    <div ng-controller="facebookController">

      <br/>

      <table>

          <tr>

              <td>ID</td>

              <td> {{ customers.id }} </td>

          </tr>

          <tr>

              <td>About</td>

              <td> {{ customers.about }} </td>

          </tr>

          <tr>

              <td>Category</td>

              <td> {{ customers.category }} </td>

          </tr>

          <tr>

              <td>Link</td>

              <td> {{ customers.link }} </td>

          </tr>

          <tr>

              <td>Likes</td>

              <td> {{ customers.likes }} </td>

          </tr>

          <tr>

              <td>Name</td>

              <td> {{ customers.name }} </td>

          </tr>

          <tr>

              <td>Username</td>

              <td> {{ customers.username }} </td>

          </tr>

          <tr>

              <td>Image</td>

              <td>

                <img src= "{{ customers.cover.source }}" class="user-image"/>

              </td>

          </tr>

      </table>

    </div>

 </body>

</html>


Output :


Comments

Post a Comment

Popular posts from this blog

PG::DuplicateTable: ERROR: relation "taggings" already exists in Ruby on Rails

Error: PG::DuplicateTable: ERROR:  relation "taggings" already exists Solution : Already the table present in your database.But migration also trying to create a table in database.For this reason error occurred. So try to remove the table (taggings) from your database.   postgresql :     > DROP TABLE IF EXISTS taggings;   Rails console :     > ActiveRecord::Migration.drop_table(:taggings)
1 comment
Read more

Simple Pagination in Ruby on Rails using will_paginate gem Tutorials

You should use the will_paginate gem for pagination. Steps : 1. Create new project    Develop > rails new addpagination 2. Open the gemfile inside the project folder (addpagination).Add below line in gemfile    gem 'will_paginate', '~> 3.0' 3. Enter below command in terminal and execute.    Develop > bundle install 4. Create the Database    Develop > rake db:create    5. Create the form using scaffolding    Develop > rails g scaffold post name:string city:string    6. Migrate the table    Develop > rake db:migrate    7. Now run the application    Develop > rails s   8. Check the application.Its working or not.    open browser and enter http://localhost:3000/    9. Configure the page redirection in routes.rb inside the config folder      root 'posts#index' 10. Now add t...
2 comments
Read more

How to get a YouTube video thumbnail dynamically from the YouTube API using AngularJS

In this tutorial I have explain about the get YouTube thumbnail using AngularJS <html ng-app id="YoutubeApp">   <head>     <title>       How to get a YouTube video thumbnail dynamically from the YouTube API using  AngularJS Tutorials</title>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>     <script>       function YoutubeController ($scope) {         $scope.todos = [];         $scope. addVideo = function() {           $scope.todos.push({text:$scope.todoText, done:false});           $scope.todoText = '';  ...
1 comment
Read more