Angular routes doesn't work after url suffix - javascript

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.

Related

White label Error Page load when page refresh (angular route with spring boot)

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.

ngRoute not working when page reload

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

How to handle page reload in angularjs app for url that doesnt exist in laravel

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).

angular route with asp.net MVC remove hash # on url

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

AngularJS ignore routing by ui.route

I try change build-in Angular route mechanism to ui.router. So I included angular.ui.router.js to my index.html and to my module:
var app = angular.module('multibookWeb', ['ui.router']);
Next I set routing in app.config:
$urlRouterProvider.otherwise('/list');
$stateProvider
.state('list', {
url: '/list',
templateUrl: '/partials/list/list.html',
});
Console don't show any errors, but routing doesn't work. I fired www.someAddress.com/# and I expect that my routing redirects me to www.someAddress.com/#/list or something like this. Unfortunately it doesn't happend. When I console (inside $watch) value of $state.current.name it return me empty string. I tried debugging by this, but console is still empty...
My Angular version: 1.2.28
My Ui.router version: 0.2.13
Here is plunker
The problem is, you have no ui-view.
For the ui-router to function you will need an ui-view. Replace your ng-view with ui-view and it will work.

Categories