I'm developing a web application using ASP.NET MVC and AngularJS with ngRoute module. The configuration works fine but URLs contain #/ and I would like to remove them. I know the point is adding $locationProvider.html5Mode(true); and <base href="/"> in the <head> but there is some conflict with server side routing and I can't get it work.
This is the route provider
$routeProvider
.when("/", {
templateUrl: "Home/Phones",
controller: "firstController"
})
.when("/phone", {
templateUrl: "Home/Phone",
controller: "secondController"
})
Pages can be normally accessed through http://localhost/test/#/ and http://localhost/test/#/phone.
Now if I add $locationProvider.html5Mode(true); and <base href="test"> in the header section of index page I can access the default page at http://localhost/test/ but the page is empty. Trying to access and I get an error at http://localhost/test/phone fires 404 page not found.
So... how to solve the first problem? Console doesn't show any error, don't know what to try...
I guess I should at least change my RouteConfig.cs, not it contains the default
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
The browser is requesting an asset /test/phone but that doesnt exist. In the case of 404s within a Single Page App using html5Mode you need to configure your webserver to serve the index.html on all "404"s
Related
I am trying to add angular roue configuration to spring boots java application. urls are working well. bu problem is when i click back button or page refresh, there is an error. error said 'Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback'. how to config server angular route with spring boot.
my route configurations
var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute']);
// configure our routes
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/test', {
templateUrl : 'template.jsp'
})
.when('/ct', {
templateUrl : 'ct.jsp',
controller : 'myCtrl'
})
.when('/qa', {
templateUrl : 'qa.jsp',
controller : 'ourCon'
})
$locationProvider.html5Mode(true);
});
my menu
CT
QA
how to solve this issue.
I am using ngRoute to my application. problem is when i reload that page, there is an error.
error said
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute']);
// configure our routes
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/container-details', {
templateUrl : 'container-details-test.jsp',
controller : 'myCtrl'
})
$locationProvider.html5Mode(true);
});
You'll need to configure your server based off the guidelines on this page:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I am using AngularJS ui route for routing I want to remove # (hash from URL). I am using this code and also using (base href="/") in my index.html file. It's working fine but when I refresh the page like (http://0.0.0.0:3000/athletepersonalinfo) it's giving me an error.
.config(function($stateProvider,$locationProvider) {
$locationProvider.html5Mode({ enabled: true, requireBase: false })
$stateProvider
.state('/', {
url: '',
templateUrl:HTML.HOME,
controller: 'homeController as home'
})
.state('home', {
url: '/',
controller: 'homeController as home',
templateUrl: HTML.HOME
})
.state('athletepersonalinfo', {
url: '/athletepersonalinfo',
controller: 'athleteProfileInfo',
templateUrl: HTML.ATHLETE_PERSONAL_INFO,
authenticate: true
})
When you hit refresh the server actually tries to find if the given route has been defined /athletepersonalinfo. To actually remove the # from the url you will have to include a get(/*) route which would always return your index.html page. This route should be after all other routes. Now what this means is your index.html will be served whenever no routes is defined than in your client side angular will handle which view to load. Few points to note when making such chages
Since any unresolved get could return your index.html make sure your routes are meaningful like all your assets start with /assets/ path, all your api calls start with /api/ .
The benefit in doing so is if you get a 404 on some assets or an api call you would still get your index.html which is wrong. But with this approach all you need to do is set a route something like this
app.get('/:url(api|assets)/*',function(req,res){
res.status(400).send("Not Found")
});
app.get('/*',function(req,res){
res.sendFile('index.html');
});
Make sure the * route is defined after all other routes else you will keep getting index.html for every request.
Hope this helps.
How to handle page reload in AngularJS app for URL that doesn't exist in Laravel routes
I don't know how to bump but I have the exact same problem as this guy and looks like his question didn't get answered.
I'm using angular 1.4.8 and laravel 5.2.
If I load the page "home.php" it works(shows home content and "main" content).
I press a link to open home/info and it works and I see the info page loaded with angular routes.
Now if I refresh this I get an error(Not found exception).
How can I fix this in laravel?
My angular routes for home.php:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.when('/', {
templateUrl : '/main'
})
.when('/info', {
templateUrl : '/info'
});
});`
Laravel routes:
Route::get('home', function () {
return view('home');
});
Route::get('main', function () {
return view('main');
});
Route::get('info', function () {
return view('info');
});
So what's not working: I can't go directly to home/info(or refresh it). I can only go to home, then press link to home/info to see it. It should load home page with info page loaded(with angular routes).
I have a application running at www.xyz.com/platform/
and here is my routing config in angular:
var app = angular.module('coreApp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/platform/dashboard',{
templateUrl: '/partials/dashboard.html'
}).otherwise({redirectTo: '/platform/dashboard'});
}]);
I expect that as soon as the application is opened the URL should change to www.xyz.com/platform/#dashboard and the template be loaded. But template never gets loaded. Neither I get any error in console.
This works however, if I try to run this at xyz.com without the trailing /platform.