ngRoute not working when page reload - javascript

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

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.

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

ASP.Net MVC "mini spas" and Angularjs Routing

I am having a hard time trying to figure out what is happening with routing in MVC and Angularjs. I am seeing different behavior between the 1.0.x version of Angularjs and the 1.3.x version.
I am building an MVC site with multiple "mini spas". I have an MVC controller called Registration and the route to it is http://mysite/Registration. The index view for that controller then renders a page containing the html and angular scripts.
I want to have angular routes that will render html templates and have set up the routing as follows.
// this works in 1.0.x
var registrationModule = angular.module("registrationModule", []);
registrationModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Members', {
templateUrl: '/templates/members.html',
controller: 'MembersController' });
$routeProvider.when('/Registration/Updates', {
templateUrl: '/templates/updates.html',
controller: 'UpdatesController' });
$locationProvider.html5Mode(true);
});
When I have the above routing and reference angularjs 1.0.x everything work as I would expect. The views load correctly and it does not post back to the server for the /Registration/* routes.
However, when I reference angular 1.3.x and have the following routing:
// this does not work in 1.3.x
var registrationModule = angular.module("registrationModule", ['ngRoute']);
registrationModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/Registration/Members', {
templateUrl: '/templates/members.html',
controller: 'MembersController' });
$routeProvider.when('/Registration/Updates', {
templateUrl: '/templates/updates.html',
controller: 'UpdatesController' });
$locationProvider.html5Mode(true);
});
The views do not load on the /Registration/* routes and it posts back to the server for the RegistrationController to handle all /Registration/* routes.
Is there some fundamental difference in routing between the versions? Have I failed to implement angular routing correctly in the new version?

Angularjs unknown provider in $templateRequestProvider

I am including other html files as template in index.html. For this i am using ng-view directive. But i am getting an error:
Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
The code I am using is:
'use strict';
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});
Here are the Controllers :
surveyApp.controller('profileController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the profile page';
});
surveyApp.controller('surveysController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the surveys page';
});
The Config:
surveyApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
.when('/surveys', {
templateUrl : 'pages/surveys.html',
controller : 'surveysController'
});
$locationProvider.html5Mode(true);
});
This is the HTML:
<body ng-app="surveyApp">
<div id="main">
<div ng-view></div>
</div>
</body>
Where am I missing?
Done. In most of the cases it would be the versions of angular-route and angularjs were conflicting. After then, it mostly crashed the page due to continuous loop requests in
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
Every time it saw a '/', it redirected to the same page all over again and hence forming an infinite redirect loop. This should be used in the last so that the first ones are checked, and if something remains, then it sees the '/' route.
Had the same problem, the issue for me was also a dependancy but not angular-route. The dependancy that caused the error for me was angular-bootstrap.
The current angular version in our project is 1.28 and angular-route is also 1.28. This error was triggered on updating angular-bootstrap from 0.12.1 to 0.13.
The only issue with your code is the missing closing curly brace after surveyFactory definition.
Change the code for app and factory definition to below to fix the issue:
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});

Categories