I have the following routing configuration:
$locationProvider.html5Mode().enabled = true;
config file:
define(function (require) {
"use strict";
return ['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/error/404');
require('filePath')($stateProvider);
}];
});
routing file:
define( function () {
return function ( $stateProvider ) {
return $stateProvider.state('hi', {
url: '/',
templateUrl: 'common/hi.html',
controller: 'HiController'
})
.state('404', {
url: '/error/404',
templateUrl: '404.html',
})
.state('somePage', {
url: '/some/page',
templateUrl: 'page.html',
controller: 'HiController'
});
};
});
and now, when I try to open e.g. site.com/some/page I'm being redirected to site.com/error/404. Why ?
Related
Hello I am working with ionic framework and I want to redirect to another page
after successfully login .When I run project using command:
ionic serve then $state.go working properly but when I run project using
ionic serve --lab it is not working
.controller('AppCtrl', function($scope,$http, $ionicModal,$location,$state, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
alert($scope.loginData.username);
alert($scope.loginData.password);
$http({
method: 'POST',
url: 'http://localhost/home_owner12/admin/api/login',
data: {username:$scope.loginData.username,password:$scope.loginData.password},
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
})
.then(function successCallback(response)
{
if(response.data.length > 0)
{
$state.go('app.search');
console.log('the state is '+$state.current);
}
else
{
alert("Invalid email or pasword");
///$location.path('/search');
}
}, function errorCallback(response)
{
alert("Invalid email pasword");
});
};
})
here is state:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'AppCtrl'
}
}
});
and module
angular.module('starter', ['ionic', 'starter.controllers', 'ui.router'])
The app.search page's controller goes to AppCtrl in place.
Because AppCtrl runs a second time, it is entering an infinite loop.
Replace the code with that
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
}
}
});
and
.controller('SearchCtrl', function($scope,$http, $ionicModal,$location,$state, $timeout) {
............
.........
.......
})
I got a working angular code to successfully get/store/retrieve a jwt token for authentication.
Also I got the following route controller:
// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'assets/views/dashboard.html'
})
.state('customers', {enter code here
url: '/customers',
templateUrl: 'assets/views/customers.html'
})
.state('customersAdd', {
url: '/customers/add',
templateUrl: 'assets/views/customers_add.html'
})
.state('account', {
url: '/account',
templateUrl: 'assets/views/account.html'
})
.state('login', {
url: '/login',
templateUrl: 'assets/views/login.html'
});
}
]);
I went through different tutorials on the net and I think, for my understanding the best approach would be using resolve on my routes. Yet I don't know how to bring the pieces togehter. I got a working auth service with a function auth.isAuth() that returns true or false.
But how can I bind this into my routes? And also I would like to explicit mark routes that doesn't need auth.isAuth() to be true, because there are only like two states that doesn't require an authenticated user.
Greetings
eXe
Just in case someone is looking for the same, this is my final solution:
// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('auth', {
url: '',
abstract: true,
resolve: {
loginRequired: loginRequired
},
})
.state('auth.dashboard', {
url: '/dashboard',
templateUrl: 'assets/views/dashboard.html'
})
.state('auth.customers', {
url: '/customers',
templateUrl: 'assets/views/customers.html'
})
.state('auth.customersAdd', {
url: '/customers/add',
templateUrl: 'assets/views/customers_add.html'
})
.state('auth.account', {
url: '/account',
templateUrl: 'assets/views/account.html'
})
.state('login', {
url: '/login',
templateUrl: 'assets/views/login.html'
});
}
]);
function loginRequired($q, $location, auth) {
var deferred = $q.defer();
if (auth.isAuthed()) {
deferred.resolve();
} else {
$location.path('/login');
}
return deferred.promise;
}
By using nested states my 'auth' state acts like a middleware. Now I can easily manage my routes.
Here is how I do it. Borrowed from the Satellizer library. Works great!
//note the resolve block.
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
data: {
pageTitle: 'Home'
},
resolve: {
loginRequired: loginRequired
}
})
.state('splash', {
url: '/',
templateUrl: 'views/auth/splash.html',
controller: 'SplashCtrl',
data: {
pageTitle: 'Welcome'
},
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
})
//add to your apps config block, below your route definitions
function skipIfLoggedIn($q, auth) {
var deferred = $q.defer();
if (auth.isAuth()) {
deferred.reject();
} else {
deferred.resolve();
}
return deferred.promise;
}
function loginRequired($q, $location, auth) {
var deferred = $q.defer();
if (auth.isAuth()) {
deferred.resolve();
} else {
$location.path('/');
}
return deferred.promise;
}
Whenever I attempt to go to profile state I'm thrown back to the home state (no errors in console).
Here's my setup:
app.js
angular.module('app',[
'oclazyLoad'
'app.components'
])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');
//$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('jwtInterceptor');
function lazyLoad(pathjs) {
return ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(pathjs);
}];
}
$stateProvider
.state('home', {
url: '/',
template: 'asd'
})
.state('profile', {
url: '/profile',
templateUrl: 'components/profile/profile.html',
controller: 'profileCtrl',
controllerAs: 'vm',
resolve: {
module: lazyLoad('components/profile/profile.js'),
user: ['SessionService', function (SessionService) {
return {fake: 'user'};//SessionService.currentUser(true);
}]
}
})
}]);
angualar.module('app.components',[]);
profile.js
angular.module('app.components')
.controller('profileCtrl', ['user', function(user){
var vm = this;
vm.test = 123;
}]);
profile.html
<div>{{vm.test || 1}}</div>
This was an embarrasing problem but I forgot to return the response in my $http interceptor jwtInterceptor.
Take the following code. I have a cookie that is created once a user successfully logs in. My API is also already authenticated. What I am looking to do is do a simple check of the cookie before serving up a route, with the only exception of the login route.
angular
.module('pizzaGiants.routes', ['ui.router'])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
// Application Routes
// -----------------------------------
// add check if cookie exists else redirect to login
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'features/login/login.html',
controller: 'loginCtrl'
})
.state('attributes', {
url: '/attributes',
templateUrl: 'features/attributes/attributes.html',
controller: 'attributesCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'features/users/users.html',
controller: 'usersCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'features/signup/signup.html',
controller: 'signupCtrl'
})
.state('roles', {
url: '/roles',
templateUrl: 'features/roles/roles.html',
controller: 'rolesCtrl'
})
.state("fruits", {url: "/fruits",templateUrl: "features/fruits/fruit.html",controller: "fruitCtrl"}).state("colors", {url: "/colors",templateUrl: "features/colors/color.html",controller: "colorCtrl"}).state("contacts", {url: "/contacts",templateUrl: "features/contacts/contact.html",controller: "contactCtrl"})
}]);
Could be like following
app.run([
'$rootScope','$location', '$timeout',
function ($rootScope, $location, $timeout) {
$rootScope.$on('$stateChangeStart', function () {
if (// your condition logic) {
$timeout(function () {
$location.path("/login");
}, 1);
}
});
}
]);
I am unable to change my Url using $state.go but i am getting that page for which i have requested in $state.go , I have also used route.js
angular.module("myApp")
.controller('myController', ['$scope','$state', function ($scope, $state) {
$scope.showDetails = function(data){
if(some true condition){
$state.go("create.preemp");
}
else if(some true condition){
$state.go("create.prepolicy");
}
}
}])
angular.module("myApp")
.config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/',
templateUrl: 'signin/signin.html',
controller: 'signinController'
})
.state('create.preemp', {
url: '/create.preemp',
templateUrl: 'preemp.html',
controller: 'preempController'
})
.state('create.prepolicy', {
url: '/create.prepolicy',
templateUrl: 'prepolicy.html',
controller: 'prepolicyController'
})
$urlRouterProvider.otherwise('/');
})
??