FrenchyNYC FrenchyNYC - 4 months ago 18
Javascript Question

Why is my controller breaking my code?

I am running a ionic project and I visualize it live with the Ionic Lab tool. It is pretty good because each time I modify a html doc, it shows live what's going on.

Now, I have inserted a controller at the bottom of my controllers.js and it just breaks my project. What I mean by that is that if I take the code off of the controllers.js file, the project shows up normally but if I put it, it justs make the entire project go blank. Like if nothing was on it.

Here is the code I added :

.controller('AccountCtrl', function($scope, $state, $cordovaOauth) {
$scope.$on('$ionicView.enter', function() {
//Authentication details.
JSON.stringify(firebase.auth().currentUser));

//Get logged in user credentials.
var user = firebase.auth().currentUser;
var name, email, photoUrl, provider;

if (user != null) {
name = user.displayName;
email = user.email;
photoUrl = user.photoURL;
provider = user.provider;
}

//Set Profile Image.
profileImage = photoUrl;
//Set Profile Name.
profileName = name;
//It is now up to you to set provider and email!
})
});


And here is my complete document :

angular.module('starter.controllers', [])

.controller('LoginCtrl', function($scope, $state, $cordovaOauth) {
$scope.signIn = function() {
$state.go('tab.dash');
};

$scope.facebook = function() {
var facebookAppId = "198040820571843";
$cordovaOauth.facebook(facebookAppId, ["public_profile", "email"]).then(function(response) {
var credential = firebase.auth.FacebookAuthProvider.credential(response.access_token);
loginWithCredential(credential, 'Facebook');
}, function(error) {
//User cancelled login. Hide the loading modal.
});
}

$scope.twitter = function() {
var twitterKey = "aJWByCgPhUgYZJMojyFeH2h8F";
var twitterSecret = "XxqKHi6Bq3MHWESBLm0an5ndLxPYQ2uzLtIDy6f9vgKKc9kemI";
$cordovaOauth.twitter(twitterKey, twitterSecret).then(function(response) {
var credential = firebase.auth.TwitterAuthProvider.credential(response.oauth_token,
response.oauth_token_secret);
loginWithCredential(credential, 'Twitter');
}, function(error) {
//User cancelled login. Hide the loading modal.
});
};

loginWithCredential = function(credential, provider) {
firebase.auth().signInWithCredential(credential)
.then(function(response) {
//User logged in through provider.
$state.go('tab.dash');
})
.catch(function(error) {
//Show error message.
var errorCode = error.code;
});
};
});

.controller('AccountCtrl', function($scope, $state, $cordovaOauth) {
$scope.$on('$ionicView.enter', function() {
//Authentication details.
JSON.stringify(firebase.auth().currentUser));

//Get logged in user credentials.
var user = firebase.auth().currentUser;
var name, email, photoUrl, provider;

if (user != null) {
name = user.displayName;
email = user.email;
photoUrl = user.photoURL;
provider = user.provider;
}

//Set Profile Image.
profileImage = photoUrl;
//Set Profile Name.
profileName = name;
//It is now up to you to set provider and email!
})
});


I really don't understand what is going on, it just breaks everything !

And I call that controller in the app.js :

.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html'
}
},
controller: 'AccountCtrl'
})


If anybody has any help... Thanks !

EDIT , in the console, here is the error :

?ionicplatform=android:29 Uncaught SyntaxError: Unexpected token . http://localhost:8100/js/controllers.js Line: 43console.(anonymous function) @ ?ionicplatform=android:29
controllers.js:43 Uncaught SyntaxError: Unexpected token .


It is the line that starts my controller of course...

Answer

Two issues:

You have a trailing semicolon (;) on the controller LoginCtrl.

Your AcctCtrl cannot be fluently attached to your angular module because of that trailing semicolon on the controller above it.

Second,

This line has one too many closing )

JSON.stringify(firebase.auth().currentUser));

It should be:

JSON.stringify(firebase.auth().currentUser);