I have my home page in the root directory, Home.html.
I then have my App folder setup like this.
App - > Equipment->Equipment.html
My ui-router setup is this.
$locationProvider.html5Mode({ enabled: true, requireBase: false});
$urlRouterProvider.otherwise("/Home");
$stateProvider
.state('Home',{
url:"/Home",
templateUrl:'./App/Home/HomePart.html'
.state('Equipment',{
url:"/EquipmentBuilder",
templateUrl:'./App/Equipment/Equipment.html',
controller: 'EquipCtrl'
});
Everything seems to work fine, until i go to the equipment page, and refresh manually... It then tries to go to Localhost/Equipment.html. Rather than keep the route, which would really be .App/Equipment/Equipment.html.
All im doing on the homepage is showing the view
<div ui-view></div>
Why is it that it doesn't refresh the state, but rather tries to go to a page that does not exist.
Cant seem to find a solution to the refresh issue. People can't bookmark the page either, because it tries to bookmark LocalHost/Equipment, which doesn't exist.
Related
I am stuck with this for a while. I am very much new to ui-router's nesting of views. I am trying to route to default when "/" accessed. Here's my js file:
angular
.module("app")
.config(function($stateProvider,$locationProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("dashboard");
$stateProvider
.state("home",{
url: "/",
templateUrl: "views/home/home.html"
})
.state("login",{
url: "/login",
templateUrl: "views/login/login.html"
})
.state("home.dashboard",{
url: "/dashboard",
templateUrl: "views/home/dashboard.html"
});
$locationProvider.html5Mode(true);
});
I don't know why that's not working. Every time I try to load localhost, it's not going to localhost/dashboard. Rather, it stops loading till home.html. Please help me in learning something new and showing my mistake.
Please see this working plunker. I turned off the HTML5 mode because it prevents plunker to work correctly.
The main problem with your code was that you were redirecting to /dashboard, in this statement:
$urlRouterProvider.otherwise("/dashboard");
Please note that home.dashboard is a child state of home. So, by default, the URL should be preceded by that of the home state. So the correct statement would be:
$urlRouterProvider.otherwise("/home/dashboard");
If you don't want the preceding /home, you need the change your route configuration for home.dashboard state to this:
.state("home.dashboard", {
url: "^/dashboard",
templateUrl: "dashboard.html"
});
The preceding ^ makes the URL absolute and makes it free of any preceding parent state's URL. So now, the statement $urlRouterProvider.otherwise("/dashboard"); will work as is.
After this change, the code could load the template home.html in the view. Further, you didn't have any ui-view directives in home.html in which the template of home.dashboard could load. So I added a <div ui-view></div> element in home.html to make it work correctly.
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.
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?
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
In the config method, I have some routes defined as follows:
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
...
});
$routeProvider.when('/front', {
...
});
$routeProvider.when('/user/account', {
...
});
Everything works fine when navigating through the app using <a href=""> tags. However, when I go to /user/account and manually refresh my browser, it pops the /account off the route and redirects me to /user, breaking the rendering in the process since there is no route defined for /user.
I noticed this does not happen when I configure the route to be /account only, but this is not fixing the real issue. So I set up the following catch-all (below the routes above) to log what's happening:
$routeProvider.otherwise({
redirectTo: function() {
console.log('bumped', arguments);
return '/';
}
});
and saw it was trying to match /account instead of /user/account. What is going on here?
I am on Angular 1.1.5. The server returns index.html appropriately on all requests (for HTML5 mode), so it seems like a client-side issue.
How can I configure this route correctly?
EDIT
Turns out this is a bug in 1.1.5 core.
https://github.com/angular/angular.js/issues/2799
patched here
https://github.com/IgorMinar/angular.js/commit/2bc62ce98f893377bfd76ae211c8af027bb74c1d
Ended up using ui-router which solved this issue.