I'm using ui.router with angularJs and i came across with strange behavior.
If i click trough page everything works as expected, links are changing, templates are loading, but if i visit some specific page directly (other then www.myapp.com) i always get 404 page not found
This is my app.js
var app = angular.module('app', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "app/templates/dashboard/dashboard.html",
controller: 'dashboardCtrl'
})
.state('locations', {
url: "/locations",
templateUrl: "app/templates/locations/locations.html",
controller: 'locationsCtrl'
})
.state('locations.add_location', {
url: "/locations/add_location",
templateUrl: "app/templates/locations/add_location.html",
controller: 'addLocationCtrl'
});
$locationProvider.html5Mode(true);
});
Explained in pictures
I visit www.myapp.com, page renders
I click on locations, everything is normally working
I can also click on dashboard link again and it will work
But if i press f5 or copy paste link in URL bar of browser, i will get 404
Why is this happening. What im i missing. If you need any additional informations, please let me know and i will provide.
That's because Apache tries to serve the file location in your www root directory. It's not possible because you have got SPA app without subpages. You have to force Apache web server to rewrite all locations and serve index.html page (main page). I found helpful gist for that:
https://gist.github.com/santthosh/7dabf08fa3859361ef1e
Related
So this may be a dumb mistake but I have an angularJs application and I have ui-router changing the states. I am able to navigate to the different pages by ui-sref and $state.go() but for some reason if I type the url directly into the browser I get back the error cannot GET .... I have no clue why, but here is the config code and a state setup:
App Config:
.config(function ( $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/');
});
Items Page component/controller/state config:
(function(){
'use strict';
angular.module('app')
.component("itemPage",{
templateUrl: 'app/itemPage/itemPage.html',
controller: itemPageCtrl
})
.config(['$stateProvider',function ($stateProvider) {
$stateProvider
.state('item', {
url: '/item',
template: '<item-page></item-page>'
});
}]);
function itemPageCtrl(){
var ctrl = this;
}
})();
Just to reiterate, if I am the main page of my site and I click a button I can get to items page with ui-sref or $state.go() but if I try to put the url directly in localhost:9000/item or if I am already on the page and click refresh it gives the cannot GET /item message.
Any help will be greatly appreciated and I can give more code if needed.
Thank you.
You should make a config on your server to redirect all requests to the entry point file (usually your index.html), using a .htaccess file for example in Apache.
This question was already made sometimes;
Reloading the page gives wrong GET request with AngularJS HTML5 mode
Configuring on an Apache server: htaccess redirect for Angular routes
Configuring on a Node server: Node.js catch-all route with redirect always renders index page with Angular regardless of url
Recently I have developed a website http://www.skduhariya.com, this is completely based on angularJS. I'm using the concept of ui-router for routing between the static pages. Symbol(#) is being displayed in the URL like skduhariya.com/#/blogs
I tried using $locationProvider to remove Symbol(#) from the URL so URL becomes like skduhariya.com/blogs,
its working fine, But, when we refresh the browser is not working as expected. Its display 404-Page Not found.
code:
function routeConfig($stateProvider, $locationProvider) {
$stateProvider.state('public', {
abstract: true,
templateUrl: 'src/public/public.html'
});
$locationProvider.html5Mode(true);
}
can anyone help me out to fix this.
You may could watch here
As he is already describing:
Server side
Using this mode requires URL rewriting on server side,
basically you have to rewrite all your links to entry point of your
application (e.g. index.html)
:)
I am not sure what is going on but I am using Angular to build an app. All I am trying to do is inject a partial when states change. I am using ui-router. Here is my app code:
$stateProvider
.state('home', {
url: "/",
templateUrl: "homePartial/home.html",
controller: 'HomeCtrl',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor, USER_ROLES.guest]
}
})
;
$urlRouterProvider.otherwise("/");
Here is my partial - home.html:
<p>test</p>
Now when I go to my app and click 'home' I see the contents of the partial BEFORE it was edited. It's almost like the partial didn't save. When I go to app/homePartial/home.html, I can see the changes propagated.
This is most likely a caching issue, clear your cache and refresh the page and you should see your modified page.
if you use Google Chrome, I'd advise ticking the "Disable Cache (while DevTool is open)" inside Dev tool -> settings
Hello to everyone thanks in advance for your help,
I am having tough time trying to figure out why my routing is not fully working. I am going to explain.
I do have a nav bar with dropdown options which leads to the routes I've defined on my angular app config stage.
HTML
<head>
...
<base href="/">
...
</head>
...
(inside navbar)
<ul class="dropdown-menu">
<li><a ui-sref="Check">Check</a></li>
</ul>
...
JS (config)
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'app/components/home/home.html'
});
// SERVICE VIEWS =================================
$stateProvider
.state('Check', {
url: '/Check',
templateUrl: 'app/components/Check/Check.html',
controller: 'CheckCtrl'
});
$urlRouterProvider.otherwise('/');
}]);
Everything runs great when I do access through the home (through index.html -> click on the navbar and access Check) It loads the template properly.
But when I am trying to access directly to that view nothing gets loaded at all. Blank screen.
To sum up:
Action:
Access localhost:8080 -> All runs OK
Access localhost:8080/Check directly -> Not a single thing is loaded.
No idead what I am missing here.
Thanks for your time and support.
Can you put your server.js file ?
I think you lack some line which should look like this :
app.use("/app", express.static(__dirname + "/app"));
From the frequently asked questions on their wiki:
How to: Configure your server to work with html5Mode
When I add $locationProvider.html5Mode(true), my site will not allow pasting of urls. How do I configure my server to work when html5Mode is true?
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
How to do that depends on the type of server you are running, it's all explained in the article linked above.
I made simple angular application with simple routing.
angular.module("mainApp", ["ngRoute"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "views/main.html",
controller: "MainController"
})
.otherwise({ redirectTo: "/main" });
});
Start "mongoose-free-6.1" server, and first time when I open my page everything works fine. My main page path is:
http://192.168.0.16:8080/EventManagementMobile/EventManagementMobile/#/main
After first manual refresh on the page I get route:
http://192.168.0.16:8080/main#/main
Page is broken and in console I get error:
GET http://192.168.0.16:8080/views/main.html 404 (Not Found)(anonymous function)
Error: [$compile:tpload] http://errors.angularjs.org/1.5.2/$compile/tpload?p0=views%2Fmain.html&p1=404&p2=Not%20Found
at Error (native)
The same happens when I start it from VS2015 in IISExpress. First route work fine:
I probably do not understand how routing works. What happens here ?
This problem was caused by synfusion library loaded on page together with angular. Answer from synfusion support team:
The script file ej.mobile.all.min.js is a collection of Essential
Studio JavaScript Mobile components. In that, AppView acts as a base
container and master page for the Mobile application. We have handled
the history navigation internally for Single Page Applications, which
interfere for Angular routing. Hence for Angular routing, we need to
prevent the initialization of AppView. Refer to the following code
example.
[html]
<script>
App.preventAppviewInit = true
</script>
The above mentioned script have to be referred next to
ej.mobile.all.min.js script reference.
Link to the original question and answer:
http://www.syncfusion.com/forums/123560/loading-syncfusion-scripts-on-page-break-angular-routing