I'm still new to angular ui router and I have problem with nested state / nested views need your help. I have angular app using ui.router with the states definition as bellow:
$locationProvider.html5Mode(true);
$stateProvider
.state('root',{
abstract:'true'
views:{
'top@':{},
'@':{}
}
})
.state('childone',{
url:'/childone,
parent:'root'
views:{
'top':{ template:"top navigation bar"},
'':{template:"Main Navigation"}
}
});
for the childone state, every thing work as expected until I add some params to this state like this :
...
.state('childone',{
url:"/childone/:child_id",
parent:"root",
views:{
'top@':{
template:"Top navigation with some styling in app.css"
}
'@':{
template:"Main contain with style"
}
}
});
Now. If I navigate to this childone state using link (ui-sref=({child_id:'1232'})) the page will load all stylesheet and apply to elements ok. But if I refresh the state or go there directly using url, the page will be broken, no styles are apply to element that broke my view. I tried so many options and solution from here but nothing work for me so far.
could someone point me out what I'm missing / wrong here please.
( I'm trying to build a MEAN stack app. )
Edit: this is my Node/express server side to serve static index.html file:
var express = require('express');
var app = express();
var server = require('http').Server(app);
var port = process.env.PORT||80;
var mongoose = require('mongoose');
//var passport = require('passport'); //will be used later
var bodyParser = require('body-parser');
var cookie = require('cookie-parser');
var path = require('path');
var session = require('express-session');
var dbconf = require('./app/config/db');
var flash = require('connect-flash');
var conf = require('./app/config/app');
mongoose.connect(dbconf.mongo);
/*middleware*/
app.use(cookie(conf.secret));
app.use(session({cookie: { maxAge: 60000 }}));
app.use(flash());
app.use(express.static(__dirname + '/public'));
app.use(bodyParser());
app.use(bodyParser.json({type: "application/vnd.api+json"}));
app.use(bodyParser.urlencoded({extended: true}));
app.get('*',function(req,res) {
res.sendFile(path.join(__dirname, '/public/' + 'index.html'));
});
app.use(function(req,res) {
res.status(404);
res.send('The path not exist');
});
server.listen(port);
console.log('Http server on and serving at port ' + port);
index.html. And all the rest urls are "fake" url changes only displayed in the browser, but for the server it should all go to the same route. You'll need some kind of redirect (.htaccess or apache/nginx config) and point incoming requests to your "real" entrypoint (index.html). Maybe this will help? stackoverflow.com/questions/26258816/…app.get('*',...?