I have the routing in Angular setup this way:
$stateProvider
.state('loginHome',
{
url: "/",
templateUrl: "scripts/features/account/views/login.html"
})
.state('login',
{
url: "/login",
templateUrl: "scripts/features/account/views/login.html"
})
So, whenever a user navigates to:
http://localhost/MyApp/
http://localhost/MyApp/login
The login view is rendered
How do I setup a route that when a user enters the below URL, it navigates them to login:
http://localhost/MyApp (no trailing slash)
Why not use otherwise() function of $urlRouterProvider, please include the $urlRouterProvider inside the app.config. So that all the other unrecognized routes are sent to login page! Also there are two states for login page, instead of that you can give it as.
JS:
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',
{
url: "/login",
templateUrl: "scripts/features/account/views/login.html"
})
Related
I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
I'm trying to implement Login feature and there is an redirect after success/failure using Express Router:
router.post('/login',
passport.authenticate('local', {successRedirect:'/dashboard', failureRedirect:'/login',failureFlash: true}),
function(req, res) {
res.redirect('/');
});
and after successfull login, I got Cannot GET /dashboard or in case of failure Cannot GET /login.
Is there some incompability between routing on the server (Express) and on the client side (Angular UI Router)? Should I use just one of the router and which one?
Here is the the code for UI Router:
angular
.module('app', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngResource',
'ngTouch'
])
.config( function ($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('home.dashboard', {
abstract: true,
url: '/dashboard',
templateUrl: 'views/dashboard.html'
});
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/');
$mdGestureProvider.skipClickHijack();
//remove the hashtag from URL
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Your express router is fine. and it was a norm form submit, the page will properly redirect.
But as requests are made through ajax from Angular App, those redirects are not known to the app and hence doesn't do anything.
Make your dashboard or login controller evaluate the login status and then redirect from there.
The current code you wrote is not redirecting to the front end, its generating a new GET request, you need to handle the GET requests generated.
in your case
router.get('/dashboard',function(req,res){
res.redirect("full path of the url which you use in browser")
});
or try this
{successRedirect:'http://your front end domain/dashboard', failureRedirect:'http://your front end domain/login',failureFlash: true}
How will I redirect my URL with a hah along.. Let us say I entered in the URL..
example.com/register
It should be redirected to
example.com/#/register
Is this possible?
AngularJs by default provides the routing functionality using $routeprovider or $stateProvider. You can use these providers in your config.
angular.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('dashboard', {
url:'/dashboard',
abstract:true,
templateUrl: 'views/main.html'
})
.state('dashboard.home',{
url:'/home',
templateUrl:'views/home.html'
})
$urlRouterProvider.otherwise('/');
});
In my app I've tried to set this up correctly per every blog post I've seen talking about it but I can't get the app to load at the / url. I built the app with yeoman's angular generator so it uses grunt to spin up a connect server. But going to localhost:9000 doesn't show the app anymore since trying to add $locationProvider and set the html5location to true.
angular.module('bidrAdminApp', ['sky','ui.router','ngSanitize'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state('Home',{
url: '',
templateUrl: 'views/index.html',
controller: 'ApplicationCtrl'
})
.state('Home.Events', {
url: '/events',
templateUrl: 'views/events/index.html',
controller: 'EventsCtrl'
})
.state('Home.Event',{
url: '/events/{eventId}',
templateUrl: 'views/events/event/index.html',
controller: 'EventCtrl'
})
.state('Home.Event.Overview',{
parent: 'Home.Event',
url: '/overview',
templateUrl: 'views/events/event/overview.html',
})
.state('Home.Event.Settings',{
parent: 'Home.Event',
url: '/',
templateUrl: 'views/events/event/settings.html',
});
$urlRouterProvider.otherwise('');
$locationProvider.html5Mode(true);
});
I have the <base href="/" /> in my head of the base index.html file as well.
If I change the Home state to url: '/admin' it works going to /admin but this isn't the desired outcome. Not sure if I'm missing a configuration.
Change this line:
$urlRouterProvider.otherwise('');
to this line:
$urlRouterProvider.otherwise('/');
Here is the plunker link for the code http://plnkr.co/edit/JwM8t3oNepP3tE1nUXlM?p=info
controller.js
if(($scope.login==='Admin')&&($scope.password==='admin'))
{
$state.go('login.home');
}
script.js
var DailyUsageApp = angular.module('DailyUsageApp', ['ui.router']);
DailyUsageApp.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
templateUrl: "login.html",
controller: 'authController'
})
.state('login.home', {
url: '/home',
templateUrl: "home.html",
controller: 'homeController'
});
});
The reason your code isn't working is because you are creating hierarchical states, that are not meant to be hierarchical. By naming your state login.home, you are saying that home is a child of login. This means that when you try and go('login.home') ui router is attempting to render the login state as well as the home state as a child. This means that for your current layout to work, the login template must contain its own ui-view tag. The best way to fix this is to simply rename your state to just home, and then use $state.go('home');
There is an updated plunker
The most simple solution is to NOT make state login.home nested under login.
//.state('login.home', {
.state('home', {
url: '/home',
templateUrl: "home.html",
controller: 'homeController'
});
There are also other solutions, like create a target for login.home inside of the login like this:
<div ui-view=""></div
But usually, we do not do that. Just login and then navigate to some other state hierarchy...