I want to know how to redirect to another page using Angular Js.
I already follow several questions here and don't find any answer with works successfully
This is my code :
var app = angular.module('formExample',[]);
app.controller('formCtrl',function($scope,$http){
$scope.insertData=function(){
// if($scope.name =='' && $scope.email == '' && $scope.message = '' && $scope.price =='' && $scope.date == null && $scope.client == ''){return;}
$http.post("/php/login.php", {
"email": $scope.email, "password": $scope.password
}).then(function(response, $location){
alert("Login Successfully");
$scope.email = '';
$scope.password = '';
$location.path('/clients');
},function(error){
alert("Sorry! Data Couldn't be inserted!");
console.error(error);
});
}
});
I´m getting this error:
TypeError: Cannot read property 'path' of undefined
You need to inject $location to your controller,
app.controller('formCtrl',function($scope,$http,$location){
You can use a plain JS
window.location.href = '/my-other-page'
Or, if you are using 'ui-router'
$state.reload()
or
$state.go($state.current.name, {}, {reload: true})
don't forget to inject $state into your controller dependencies:
app.controller('formCtrl',function($scope, $http, $state){
You can redirect using $window in your controller.
$window.location.href = '/index.html';
Hope this helps you
Related
I am learning how to use angular javascript alongside my favorite, PHP framework (CodeIgniter). I have a login section that authenticates to a service and gets the response using angular js. The code works fine. See snippet below
var login = angular.module('authenticationApp' , ['ngMaterial' , 'ngRoute']) ;
login.controller('authenticationController', function ($scope, $http) {
$scope.authenticate = function () {
if ($scope.username == undefined || $scope.password == undefined) {
$scope.login_error_message = "All form fields are required" ;
} else {
var url = get_base_url() + 'student/authentication/login?username=' + $scope.username + '&password=' + $scope.password ;
$http.post(url).then(
function (response) {
console.log(response) ;
/*Here I handle success*/
}, function (response) {
$scope.login_error_message = "Service Error!. Response: " + response ;
}
) ;
}
} ;
My problem is how can I send that response to the success.php page and also redirect to the success page. I can redirect using
window.location.href = get_base_url() + 'administrator/authentication/dashboard' ;
My challenge now is actually sending the response to this new location.
Thanks in advance and I am ready to provide more details if need be
After battling for long, I just decided to use plain js. Crappy but works.
I have been attempting to create a script that grabs session data from a PHP API using Angular JS to create authentication.
I have created a factory called User and in my loginController I use User.Initialise() to check whether the session in PHP has a user_id attached to it.
When using User.Initialise() in my loginController (bare in mine my session has a user attached to it) it will use $location.path("/dashboard") to change the route to the dashboard. The dashboard route has a controller that has the variable $scope.UserID which is assigned using User.Session.user_id, however, when I attempt to call User.Session it returns undefined, even though User.Initialise(); assigns it in the loginController.
Can anybody shed some light on this?
var $Gladium = angular.module("Gladium", ["ngRoute", "ngAnimate", "ngSanitize"]);
$Gladium.config(function($routeProvider, $locationProvider){
$routeProvider.when("/",{
templateUrl: "pages/login.html",
controller: "loginController"
}).when("/dashboard",{
templateUrl: "pages/dashboard.html",
controller: "dashboardController"
}).when("/error/:error_code", {
templateUrl: "pages/system_error.html",
controller: "errorController"
});
});
/* Controllers */
$Gladium.controller("dashboardController", function($scope, User){
console.log("Services:");
console.log(User.Session);
});
$Gladium.controller("loginController", function($scope, $location, User){
User.Initialise().then(function(){
$scope.Authenticate = true;
if(User.loggedIn()){
$location.path("/dashboard");
}
});
/* Variables */
$scope.Email;
$scope.Password;
$scope.Login = function(){
if(User.logIn($scope.Email, $scope.Password)){
$location.path("/dashboard");
return true;
}
}
});
$Gladium.controller("errorController", function($scope, $routeParams){
$scope.Errors = {
"request": "We couldn't process that request at this time. Please try again later.",
"unknown": "An unknown error occurred if this is persistant please contact technical support."
};
$scope.currentError = $scope.Errors[$routeParams["error_code"]];
});
/* Factories */
$Gladium.factory("User", function($http, $location){
var Session;
var Error;
return {
Initialise: function(){
return $http.get("core.php?do=getSession").then(function(requestData){
if(requestData.data["requestStatus"] == 1){
Session = requestData.data.data;
}else{
$location.path("/error/request");
return false;
}
});
},
loggedIn: function(){
if(Session["user_id"] != 0){
return true;
}else{
return false;
}
},
logOut: function(){
if(Session["user_id"] != 0 ){
$http.post("core.php",{
do: "logout"
}).then(function(requestData){
if(requestData.data["requestStatus"] == 1){
}else{
}
});
}else{
console.warn("There is no user session to logout.");
}
},
logIn: function(Email, Password){
$http.post("core.php",{
do: "login",
email: Email,
password: Password
}).then(function(requestData){
if(requestData.data["requestStatus"] == 1){
Data = requestData.data;
if(Data["actionStatus"] == 1){
Initialise();
}else{
Error = Data["Error"];
return false;
}
}else{
$location.path("/error/request");
return false;
}
$location.path("/error/unknown");
return false;
});
}
}
});
I think that u just forget to return the Session variable which should be a property of User Service
....
$Gladium.factory("User", function($http, $location){
var Session;
var Error;
return {
// return the Session so it can be accessed via User.Session, or it is a variable in private closure
Session:Session
Initialise: function(){
return $http.get("core.php?do=getSession").then(function(requestData){
if(requestData.data["requestStatus"] == 1){
Session = requestData.data.data;
}else{
$location.path("/error/request");
return false;
}
});
},
....
UPDATE
Sorry the change above won't solve your problem since you are assigning the Session closure variable, which will not change User.Session.In this way it still remains undefined.
There are several ways for you to solve this problem.
One i think that is the most simple is to keep the Session private and access it via a get function User.getSession().
$Gladium.factory("User", function($http, $location){
var Session;
var Error;
return {
// use get function to get Session
getSession:function(){
return Session;
},
Initialise: function(){
return $http.get("core.php?do=getSession").then(function(requestData){
if(requestData.data["requestStatus"] == 1){
Session = requestData.data.data;
}else{
$location.path("/error/request");
return false;
}
});
},
....
In this way u can access your Session by User.getSession().
Since firebase did their major update, it has been nearly impossible for me to find answers to basic questions. Even using their docs.
My question is how do I allow my users to sign in once on my app and stay logged in indefinitely or for a set amount of time?
Once I have a user logged in, how can I access their data? Like first and last name? Do I have to create a database and link to the userID somehow?
I am also struggling to understand how "firebase.auth().signInWithEmailAndPassword(email, password)" works since I am not providing it my firebase url. is it pulling it from the config obj on the index page?
Here is my angular code:
appControllers.controller('userCtrl', ['$scope', '$rootScope', '$ionicPlatform', '$cordovaDevice', '$mdToast', '$mdBottomSheet', '$timeout', '$stateParams', '$state', 'LogIn', 'SignUp', '$http', '$firebaseAuth',
function($scope, $rootScope, $ionicPlatform, $cordovaDevice, $mdToast, $mdBottomSheet, $timeout, $stateParams, $state, LogIn, SignUp, $http, $firebaseAuth) {
var devid;
$scope.id = "1";
$scope.errorMsg = "";
// timeout to get device ID
$timeout(function() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(device.cordova);
$scope.id = $cordovaDevice.getUUID();
return $scope.id;
}
}, 1000);
// watches change in DEVID
$scope.updateID = function() {
devid = $scope.id;
console.log(devid);
return devid;
};
$scope.initialForm = function() {
$scope.moveBox = function() {
// $("#signupbox").fadeOut();
$('#signupbox').animate({
'marginTop': "+=170px" //moves down
});
$timeout(function() {
$state.go('app.signup');
}, 500);
$timeout(function() {
$('#signupbox').animate({
'marginTop': "-=170px" //moves down
});
}, 1000);
} // end animate
// Toast for empty Fields
$scope.showAlert = function(menuName, time) {
//Calling $mdToast.show to show toast.
$mdToast.show({
controller: 'toastController',
templateUrl: 'toast.html',
hideDelay: time,
position: 'top',
locals: {
displayOption: {
title: menuName
}
}
});
} // End showToast.
// check LogIn
var em, pw;
$scope.user = {};
$scope.updateEmail = function() {
em = $scope.user.email;
console.log(em);
return em;
};
$scope.updatePass = function() {
pw = $scope.user.pass;
console.log(pw);
return pw;
};
// Password Validation
$scope.validatePass = function(ppw) {
if (ppw.length < 8) {
$scope.errorMsg = "Password must be at least 8 characters long";
}
};
// start login
$scope.logInNow = function() {
var sdata = {
em: em,
pw: pw
};
if (pw == "" || pw == null) {
$scope.errorSignIn = "Fields cannot be blank";
}
// FIREBASE LOGIN
else {
firebase.auth().signInWithEmailAndPassword(sdata.em, sdata.pw)
.then(function(authData) {
console.log("Logged in as:", authData.uid);
$state.go('app.types');
}).catch(function(error) {
console.error("Authentication failed:", error);
$scope.errorSignIn = "Email or Password is invalid";
});
}
}
};
$scope.initialForm();
}
]);
Staying logged-in forever is default behaviour, but it is all about cookies, so if Ionic clears cookies the user get logout. I'm not into Ionic so I guess you need to figure it out whether it is something with Ionic. Related Ionic blog post. If you want to logout user at some point you can do this by setting a timer and just logout user after X time passed. Note that this is a client-side operation.
In my web app I did something like this:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$scope.photoURL = user.photoURL;
$scope.name = user.displayName;
$scope.logged_in = true;
} else {
$scope.photoURL = "";
$scope.name = "";
$scope.logged_in = false;
}
});
It works, since every time user enter app the state is changing I always have correct data (Firebase User Interface). I remember there was another way to make it, but I had some issues.
Firebase is first configured and then initialized and every call you do on your app is configured for your project. So yes it is pulling from config.
By the way. Are you using the new docs like https://firebase.google.com/docs/. I am asking because they are actually pretty nice.
I do create a login system into Ionic/angularjs framework.
I would like to store a cookie and set the expires for a long time, so the user does not need to login every time as it is an internal app.
I just add http post to this controller, could not handle the cookie dependencies yet and the cookie creation:
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http, $location, $state ) { //, $cookieStore, Auth
$scope.loginData = {};
$scope.doLogin = function() {
if(!angular.isDefined($scope.loginData.login)
|| !angular.isDefined($scope.loginData.password)
|| $scope.loginData.login.trim() == ""
|| $scope.loginData.password.trim() == ""){
alert("Digite seu usuário e senha");
return;
}
$http.post('http://www.somedomain.com/somefile.php',$scope.loginData)
.then(
function(result) {
$scope.response = result;
angular.forEach(result.data, function(value, key) {
console.log(key + ': ' + value);
if( value.slice(-1) == 1 ) {
$location.path('/app/playlists');
} else {
$ionicModal.fromTemplate('<button class=button>try again</button>').show();
}
});
});
};
$scope.logout = function() {
Auth.logout();
$state.go("acesso");
};
})
Use angular-local-storage , you can work with setStorageCookie, here is the link to documentation : https://github.com/grevory/angular-local-storage
In angular js I have a routing function that should manage access to routes for admin and non admin users so i used to $routeChangeStart achieve that according to my logic if a user is logged in he can not go to that rout '/' (which is log in page ). but that dose not work. it still can go to login if the URL matches http://localhost:3000/#/
app.run(['$rootScope', 'authService', '$location', function($rootScope, authService, $location){
$rootScope.$on('$routeChangeStart', function(evt, next, curr){
if(authService.AccessPrivilegesAuth()){
if(!authService.AccessPrivilegesAdmin(next.access_level)){
$location.path('categories');
}
}else if(authService.AccessPrivilegesAuth()== false){
$location.path('/');
}
})
}]);
her is the log in controller.
app.controller('LoginController', ['$scope', '$location', 'authService','$cookieStore', function($scope, $location, authService, $cookieStore){
$scope.loginData = {
EmailAddress : "",
password : ""
};
$scope.error; $scope.error_exist = false;
$scope.login = function(){
authService.Login($scope.loginData).success(function(response){
$cookieStore.put('AuthorizationHeader', response.Token);
authService.isAuth = true;
authService.IsAdmin = response.IsAdmin;
var authData = $cookieStore.get('AuthorizationHeader');
console.log(authData);
$location.path('categories');
}).error(function(Error){
$scope.error_exist = true;
switch(Error.ExceptionMessage){
case "201" :
$scope.error = "The emailAddress/password pair don't match an existing member"; break;
case "210" :
$scope.error = "Value cannot be null missing Email Address and/or password."; break;
case "202" :
$scope.error = "The email address you are using isn't confirmed. Please see your inbox for further instructions."; break;
default :
$scope.error = "Error with the server";
}
});
};
}]);
$routeChangeStart has preventDefault() but from what I remember it didn't work. However some time ago I managed to get it working with $locationChangeStart.
$locationChangeStart fires before $routeChangeStart and if it is prevented, $routeChangeStart doesn't fire at all.
Note that I haven't tested this code:
$rootScope.$on("$locationChangeStart", function(event) {
if(notAllowed){
event.preventDefault();
};
});