Despite extensively searching through various StackOverflow threads, none of the suggested solutions seemed to work for my specific scenario. Upon analyzing the response using console.log(response), I received an "Object Object" message. I am puzzled as to why my app is now displaying "Welcome undefined" instead of just "Welcome."
app/facebook/facebook.js:
'use strict';
angular.module('ngSocial.facebook', ['ngRoute', 'ngFacebook'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/facebook', {
templateUrl: 'facebook/facebook.html',
controller: 'FacebookCtrl'
});
}])
.config( function( $facebookProvider ) {
$facebookProvider.setAppId('1410425285653598');
$facebookProvider.setPermissions("email, public_profile, user_posts, publish_actions, user_photos");
})
.run(function($rootScope){
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
.controller('FacebookCtrl', ['$scope', '$facebook', function($scope, $facebook) {
$scope.isLoggedIn = false;
$scope.login = function(){
$facebook.login().then(function(){
$scope.isLoggedIn = true;
refresh();
});
}
$scope.logout = function(){
$facebook.logout().then(function(){
$scope.isLoggedIn = false;
refresh();
});
}
function refresh(){
$facebook.api("/me",{fields:'last_name, first_name, email, gender, locale, link'}).then(function(response){
$scope.welcomeMsg = "Welcome "+ response.name;
$scope.isLoggedIn = true;
$scope.userInfo = response;
$facebook.api('/me/picture').then(function(response){
$scope.picture = response.data.url;
$facebook.api('/me/permissions').then(function(response){
$scope.permissions = response.data;
$facebook.api('/me/posts').then(function(response){
$scope.posts = response.data;
});
});
});
},
function(err){
$scope.welcomeMsg = "Please Log In";
});
}
$scope.postStatus = function(){
var body = this.body;
$facebook.api('/me/feed', 'post', {message: body}).then(function(response){
$scope.msg = 'Thanks for Posting';
refresh();
});
}
refresh();
}]);
app/facebook/facebook.html:
<div class="row" ng-controller="FacebookCtrl">
<div class="col-md-4">
<h4>{{welcomeMsg}}</h4>
<div ng-if="isLoggedIn == true">
<a href="{{userInfo.link}}" target="_blank"><img ng-src="{{picture}}"></a>
</div>
<br>
<div ng-if="isLoggedIn == false">
<button type="button" class="btn btn-default" ng-click="login()">Login</button>
</div>
<div ng-if="isLoggedIn == true">
<button type="button" class="btn btn-default" ng-click="logout()">Logout</button>
</div>
<br><br>
<div ng-if="isLoggedIn == true" class="well">
<h4>User Info</h4>
<ul>
<li>ID: {{userInfo.id}}</li>
<li>First Name: {{userInfo.first_name}}</li>
<li>Last Name: {{userInfo.last_name}}</li>
<li>Email: {{userInfo.email}}</li>
<li>Gender: {{userInfo.gender}}</li>
<li>Locale: {{userInfo.locale}}</li>
</ul>
</div>
<br>
<div class="well" ng-if="isLoggedIn == true">
<h4>Permissions</h4>
<ul>
<li ng-repeat="permission in permissions">{{permission.permission}} - {{permission.status}}</li>
</ul>
</div>
</div>
<div class="col-md-8">
<h3>Welcome to Facebook!</h3>
<div ng-if="isLoggedIn == true">
<form ng-submit="postStatus()">
<div class="form-group">
<label>Status Update</label>
<textarea ng-model="body" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br><br>
<div ng-repeat="post in posts" class="stbody">
<div class="stimg">
<img ng-src="{{picture}}">
</div>
<div class="sttext">{{post.message}}<div class="sttime">{{post.updated_time}}</div>
</div>
</div>
</div>
<div ng-if="isLoggedIn == false">
<p>You need to log in to post</p>
</div>
</div>
app/index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="ngSocial" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NgSocial App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ngSocial</a>
</div>
</div>
</nav>
<div class="container">
<div ng-view></div>
<div class="row">
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/ng-facebook/ngFacebook.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="facebook/facebook.js"></script>
</body>
</html>