angular.module('app').config(appRte);
function appRte($routeProvider, $locationProvider, storiesURL) {
$routeProvider.
when('/', {
templateUrl: 'stories.html',
controller: 'StoryController as StoryCtrl',
resolve: {
storyDataPromiseObject: ['StoryData', function(StoryData) {
return StoryData.getStories(storiesURL);
}]
}
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
When I go to my domain root http://website.com/ it works fine, but if I go to http://website.com/anything I get an error. I'd like the website to redirect to / instead. Is this possible?
Related
I created a login page for authentication. Based on the result of authentication, it redirects to different pages.
//controller.js
app.controller("LoginCtrl", ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
$scope.authenticate = function() {
loginFactory.login($scope.username, $scope.password)
.then(function(response) {
$location.path('/home');
}, function errorCallBack(response) {
console.log("Failed auth");
$location.path('/login');
});
}
}]);
The app is defined in the following config.js together with routing.
//config.js
var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/home'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
});
The structure of files:
root/
js/ -- config.js
-- authentication/ -- controller.js
views/ -- home.html
-- login.html
When I submit the login form, instead of redirecting to "http://127.0.0.1:8081/views/login", it redirects to "http://127.0.0.1:8081/views/login#/login". Plus "http://127.0.0.1:8081/login" returns 404.
I start node.js under root. From the "network" tab in Chrome, it shows "config.js" is loaded. Why doesn't the routing work?
If you do not want to use the # in angular routing, you need to enable Html5 mode.
var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/home'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true);
});
if that is not working, you may have to set your base on the pages by putting this in the head section.
<base href="/">
When user go to either localhost:8888 or localhost:8888/, my angular application change to url to http://localhost:8888/#!/
This is my angular app in home page:
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
if user go to http://localhost:8888/auth, angular redirects to http://localhost:8888/auth#!/signin,
only if user go to http://localhost:8888/auth/, angular redirects to http://localhost:8888/auth/#!/signin
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
})
.when("/signin", {
templateUrl: "/public/user/signin.html",
controller: "signinController"
})
.when('/signup', {
templateUrl: "/public/user/signup.html",
controller: "signupController"
})
.otherwise({
redirectTo: '/'
});
}
])
the angular official website and most of the books recommend using xxx/#!/xxx format. How can I do that?
Edit: I understand that I can add the trailing slash from the server side. but user can directly type xxx.com/auth.
Why is xxx.com working but not xxx.com/auth?
Edit2: the tutorial sample project works for all urls. we have pretty much the same implementation
http://angular.github.io/angular-phonecat/step-8/app/#/phones
try to enter http://angular.github.io/angular-phonecat/step-8/app (without the trailing slash
Tutorial link: https://docs.angularjs.org/tutorial/step_07
This is something you should fix on your back-end by adding a 301 redirect from /auth to /auth/.
Nginx:
rewrite ^/auth$ /auth/ permanent;
Apache:
Redirect "/auth" "/auth/" [R=301]
I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);
I have a single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})
I want to remove # hash in angularJs using $locationProvider.html5Mode(true); but this is causing all URLs to be routed through angularJs. How can I set it up so only some pre-defined URLs got routed through angularJs, while the rest still using Laravel.
The code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/alls'
});
$locationProvider.html5Mode(true);
}
]);
So if it's not /alls or /alls/page/, Laravel should handle the routing.
I've tried using <base href="."> as explained in: http://docs.angularjs.org/guide/dev_guide.services.$location. But it doesn't work.
I finally got it to work. Here is the solution:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
templateUrl: app.site_url + 'ang/index',
controller: function(){
window.location.href = window.location.href;
}
});
$locationProvider.html5Mode(true);
}
]);
Hopefully it will help someone else.