I am using angular for my app
I wanted to remove the # from the url so i added the below lines as suggested in SO answer
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
In the index.html I also added the below code as suggested here
<head>
<base href="/">
</head>
It all works fine when I navigate to pages from the home, but when i copy the url and open it in new tab, it throws 404 error
Example
When I launch the app, it's opening http://localhost:portno/home.
When I refresh the page, I'm getting a 404 error.
What other configuration should i make?
My code structure is as below
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'templeHome'
}
}
})
.state('tab.list', {
url: '/list',
views: {
'tab-home': {
templateUrl: 'templates/list.html',
controller: 'templeList'
}
}
})
You need to add a route on your server that will redirect you to the entrypoint of your front (i.e: index.html).
For example, if you were redirected from your home to http://localhost:portno/foo/bar, you'll need a route to match the /foo/bar one that will redirect you to your index.html.
It migth look like this (note that this is an example code of my own written for Hapi):
server.route([
{
method: 'GET',
path: '/foo/bar',
handler: function(request, reply) {
reply.file('./public/index.html');
}
}
...
Related
Example:
var bodyparser=require('body-parser');
var fs=require('fs');
var express=require("express");
var myApp = express();
var MongoClient=require('mongodb').MongoClient;
var assert=require('assert');
var url = 'mongodb://localhost:27017/dbname';
var ObjectId=MongoClient.ObjectID;
var http=require('http');
myApp.use(express.static("."));
myApp.use(bodyparser.json());
myApp.listen(5000);
I am using server(apache or node) to load only index file from there after am using ui-router to make it a SPA which is working well wen run in apache server but this is not working wen ran on node:
the index is being loaded correctly but following url :
http://localhost:5000/Test/#/dashboard
throws the message : "Cannot GET /Test/" in node server, How to make the Routing to work correctly in expressjs
$urlRouterProvider.otherwise('/login');
var DASHBOARD_ROOT = 'templates';
$stateProvider.state('index', {
url: '/login',
templateUrl: 'login.html',
controller: 'employeeInfoCtrl'
});
$stateProvider.state('dashboard', {
abstract :true,
url: '/dashboard',
templateUrl: 'dashboard.html',
controller: 'employeeInfoCtrl'
});
$stateProvider.state('dashboard.home',{
url:'',
templateUrl: DASHBOARD_ROOT +'/Home.html'
});
$stateProvider.state('dashboard.about',{
url:'/about',
templateUrl: DASHBOARD_ROOT +'/about.html'
});
$stateProvider.state('dashboard.employeeinfo',{
url:'/employeeinfo',
templateUrl:DASHBOARD_ROOT+'/employeeinfo.html'
});
In node : you have to add path GET#test
myApp.get('/test',function(req,resp){
resp.render('index.html');
})
you can achieve that by targeting your client build directory with
app.use(express.static('dist')) //dist is where your js is bundled
then redirect all the requests using wildcard (*) to your index.html file
app.get('*', (req, res) => res.sendFile('index.html')));
I was developing an web application just like that:
- project
--- app
------ controllers
------ views
------ app.js
--- public
------ assets
--------- css
--------- js
--------- img
--- index.html
... inside my index.html I had the basics html, link, script tags. All that loading the angular application and everything was working fine.
But now, I need to loading all the application using Node.js.
So first I move the index.html to public/ and created a new file.
index.js (Node.js)
app.use("/", express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
Runing the Node.js I got at the browser console:
GET http://localhost:3000/app/views/layouts/public.html 404 (Not Found)
This is how I load my angular views
app.config(function($urlRouterProvider, stateHelperProvider) {
$urlRouterProvider.otherwise('/');
$urlRouterProvider.when('', '/');
stateHelperProvider.state({
name: 'public',
title: 'Home',
url: '/',
controller: 'PublicCtrl',
templateUrl: '/app/views/layouts/public.html',
data: {
requireLogin: false
}
})
.state({
name: 'private',
controller: 'PrivateCtrl',
templateUrl: '/app/views/layouts/private.html',
data: {
requireLogin: true
},
children: [
{
name: 'browse',
title: 'Home',
url: '/browse',
templateUrl: '/app/views/browse/index.html',
controller: 'BrowseCtrl'
}
]
});
});
Try using
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
This worked for me, I've only used app.use for the static content (as you are) like css and js.
Also you've written it as though your index.html is in your public directory
Hope this helps
I'm trying to make my routing like github, so xpto.com/ will show home state and xpto.com/:name to show user state.
But it conflicts to each other.
$stateProvider
.state('xpto', { url: '', abstract: true })
.state('xpto.home', { url: '/' })
.state('xpto.user', { url: '/:name' });
When I hit xpto.com it's trying to show user state.
How can I fix that?
Thanks,
Celso
I found my mistake.
I'm using browserify and because of that my $stateProvider was splitted into many files causing load in different order, as follow:
$stateProvider
.state('xpto', { url: '', abstract: true })
.state('xpto.user', { url: '/:name' })
.state('xpto.home', { url: '/' });
Hope that helps somebody.
Cheers.
I would like after getting credentials from another website, to change the url in my angularJS application.
I am setting my app like this
angular.module('demoApp', [])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/example', {
templateUrl: 'views/example.html',
controller: 'ExampleCtrl'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
})
In my MainCtrl controller I change url like this :
$location.url($location.path()); // to remove url query params
$location.path('/example'); // to change the url
But this cause Cannot GET /example when I refresh the page.
Is there a solution for this ?
Thanks for your help.
It seams you didn"t handle URL rewriting needed when you activate the HTML5 mode (actually, the /example url doesn't exists, right now the only angular existing url is index.html)
So you'll have to handle URL rewriting server side.. For example for apache in a .htaccess file :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule !\.\w+$ index.html [L]
</IfModule>
Or if you're using grunt-connect :
connect: {
dev: {
options: {
port: 9002,
hostname: '*',
middleware: function(connect) {
return [
//modRewrite is used to handle properly angularjs' html5 mode
modRewrite(['^[^\\.]*$ /index.html [L]']),
lrSnippet,
folderMount(connect, '/app')
];
}
}
}
}
One more thing, be carefull, you're doing a double location change. If you want to remove query params, I sugest you to do this :
$location.path(url);
// clear any query params
$location.$$search = {};
$location.$$compose();
I have this routing configuration in app.js:
$stateProvider.state('home', {
url: '/',
views:
{
'contentView':
{
templateUrl:'modules/login/login.html',
controller:'loginCtrl'
}
},
data:
{
login: true
}
});
Whenever user hits the browser with URL http://.../MyClient/#/?param=ParamValue.
It will take the user to the login page and I am able to access the param value as well.
There is a logout button in the successive pages and after logout, I want to redirect to the initial URL and if I try something like
$location.path('/#/?param=ParamValue');
the user will stay on the same page and URL will be like this:
http://.../MyClient/#/%23/%3Fparam=ParamValue
Please let me know how to fix this.
You should try to use the $state service to navigate between your states, $state.go('home', {param: ParamValue})
also add the parameter you need in the url template for the state.
$stateProvider.state('home', {
url: '/?param',
views:
{ ....
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#state-1