I'm using StateProvider for routing in my website. Changing states from one to the other work, but whenever I refresh the page on any view, I get a 404 not found error (The requested URL /about was not found on this server.). For example, I have localhost/about (I set html5Mode to be true and require base to be false) but when I refresh it, it doesn't show that view anymore.
I am using this in my index.html page
<base href="/">
and this in my config file
state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'AboutController',
}).
What is the cause of this and how can I resolve the refreshing issue?
Related
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
OK, so I am an Angular.js newbie and I am working on creating some rudimentary routing. I have the following definition for my routing:
JBenchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'JBenchCtrl'
}).
when('/calendar', {
templateUrl: 'partials/calendar.html',
controller: 'JBenchCtrl'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
When I load the page http://localhost:53465/default.html what I get is
http://localhost:53465/default.html#/dashboard
How can I make this show up as
http://localhost:53465/dashboard
The routes that you have defined are the text that appear after the hashbang in the URL - hashbang because you do not seemed to have set HTML5 mode to true.
Thus, when you load the page http://localhost:53465/default.html, AngularJS will attempt to load the route http://localhost:53465/default.html/#!/ where the route is / - the text that appears after the hashbang(#!).
Look at your routes. There is no route handler for /. Thus, the otherwise() function is executed which simply redirects to the route /dashboard. Thus, the final URL is http://localhost:53465/default.html/#!/dashboard
If you want to load the URL as http://localhost:53465/dashboard then simply provide the above URL as it is. You don't have to specify default.html as the route handler takes care of loading the relevant HTML file (based on the templateUrl property of the route handler object)
Rename default.html to index.html then you'll be able to navigate to http://localhost:53465/#/dashboard.
In my app I have this server-generated link:
http://localhost:3000/people#/users
When I click on it I get redirected to the following HTML page with Angular UI-Router script:
<a ui-sref="users">Users</a>
<a ui-sref="invitations">Invitations</a>
<div ui-view></div>
The problem is - users state does not get triggered automatically on page load. I need to manually click on it and only then the corresponding UI-Router state gets triggered.
Here's my config file:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
})
})
There is a working plunker
$urlRouterProvider.otherwise('/users');
// States
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
});
The $urlRouterProvider.otherwise('/users'); will redirect to defined page when none is provided
This links in index.html will work as well
href
<a href="#/users">
ui-sref
<a ui-sref="users">
Check it here
If that should be more dynamic, please check the:
Angular - Dynamically Choose Starting State
In case, that our issue is that application is working with this init page:
http://domain/app/
but not without the trailing slash
http://domain/app
We have to do some redirection on a server. (Redirection is needed to make all the relative path properly working) there are some how to with asp.net mvc
Browser address will not be displayed correctly in ui-route
I have created an AngularJS application that uses ur-router. Here's a small sample of the config:
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/Admin',
views: {
'root': {
templateUrl: '/app/admin/partials/home.html',
},
'content': {
templateUrl: '/app/admin/partials/overview.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: 'admin',
url: '/:content',
views: {
'root': {
templateUrl: '/app/admin/partials/home.html',
},
'content': {
templateUrl: function (stateParams) {
return '/app/admin/partials/' + stateParams.content + '.html';
},
}
}
};
Everything is working when I start up the application, then go to the /Admin with a link and next I go to the reference link and it brings up the page:
http://xx.com/Admin/reference
When I click the browser back button it goes back to the previous page as expected.
However if I do a refresh now everything goes wrong. It forgets about ui-router and tries to find the page: xx.com/Admin/Reference
For reference I am using: #version v0.2.13
My index file looks like this:
<head>
<base href="/" />
Can someone give me some suggestions as to what I am doing wrong?
This is happening because you are using HTML5mode. You can either disable it or configure your server to handle it.
When you click a link on the page, the javascript changes the displayed url, but it does not actually navigate to the new url. When you refresh, the browser makes a request to the server for the new url. The server is treating it as a regular request, but it does not have any page at that url, so it returns a 404. You can configure the server to redirect any url to your main page so that this doesn't happen. When you refresh (with proper configuration), the server will send back index.html (or whatever your main page is) and the javascript can fetch the arguments out of the url.
This doc explains how to configure the server in ui-router. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
You will also need a <base> tag so that angular can tell the difference between the url arguments and the rest of the url.
Example <base> tag:
If your site is http://www.example.com/ and you are on the Admin page (http://www.example.com/Admin), your base tag would look like <base href="http://www.example.com/">
For more info on the different routing modes in Angular see: https://docs.angularjs.org/guide/$location
I have the following routeProvider configured:
angular.module('myModule').config ['$routeProvider', (provider) ->
provider
.when '',
templateUrl: '/templates/dashboard.html'
.when '/some_path/:some_param',
templateUrl: '/templates/dashboard.html'
And the following in a wrapping statically served template:
I also have a templates/dashboard.html appropriately defined.
When I navigate to the url, the initial page loads, however a # is not postpended on the URL, which then results in errors when I try to rewrite the URL in a controller with $location.path('fooPath').
Specifically $location.path('fooPath'), changes the URL to current_dashboard_path/#/ and reloads, while what I was expecting is for the URL to be set to:
current_dashboard_path/#/, an then location('fooPath'), to change that to current_dashboard_path/#/fooPath
Some additional context: I want to use this so that I can then use the $location service to change the url without reloading the page thus
Question is, how can I force Angular to postpend a # when an ng-view is populated.
I was missing the following line in my routeProvider:
.when '/',
templateUrl: '/templates/dashboard.html'
Additionally, the blank route
.when '',
templateUrl: '/templates/dashboard.html'
Needed to be removed
Then the way to rewrite the URL without reloading the page is the following in the controller:
lastRoute = route.current
scope.$on('$locationChangeSuccess', (event)->
route.current = lastRoute
)