I’ve tried following tutorials as well as looking at other stackoverflow questions but I can’t figure what I’m doing wrong.
I built this with the ionic creator and now I’m trying to have the user login to google and after that’s complete route to my dashboard.
Sorry this is all brand new to me. If you can explain what I’m doing wrong and why its that way, so I can learn. Thanks!
My controller.js:
angular.module('app.controllers', [])
.controller('loginCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, $urlRouterProvider) {
$scope.googlelogin = function(){
//alert('yup');
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/plus.login');
firebase.auth().signInWithPopup(provider).then(function(results){
// This gives you a Google Access Token. You can use it to access the Google API.
var token = results.credential.accessToken;
// The signed-in user info.
var user = results.user;
console.log(user);
$urlRouterProvider.otherwise('/dashboard');
//window.location.href = "dashboard.html";
});
}
}])
My login.html:
<ion-view title="Login" hide-nav-bar="true" id="page4">
<ion-content padding="true" class="manual-ios-statusbar-padding">
<form id="login-form1" class="list">
<div class="spacer" style="width: 300px; height: 40px;"></div>
<div>
<img src="img/7TKZQZBSSg62UJQB4zyu_logo.png" width="30%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div class="spacer" style="width: 300px; height: 100px;"></div>
<a id="login-button1" class="button button-stable button-block" ng-click="googlelogin()">Google Login</a>
<button id="login-button3" class="button button-stable button-block">Facebook Login</button>
</form>
</ion-content>
</ion-view>
Routes.js:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('menu.dashboard', {
url: '/dashboard',
views: {
'side-menu21': {
templateUrl: 'templates/dashboard.html',
controller: 'dashboardCtrl'
}
}
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
$urlRouterProvider.otherwise('/side-menu21/dashboard')
});
3
Answers
You should use
$state.go('menu.dashboard');
not$urlRouterProvider.otherwise('/dashboard');
Ionic uses the angular ui router, you can read more about it here: https://github.com/angular-ui/ui-router
your js should be like this
You can use $location service like below,